@appscode/design-system 1.1.0 → 2.0.0

package/vue-components/v3/footer/FooterItem.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div class="footer-item" :class="modifierClasses">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss">
+.footer-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+  color: $primary-90;
+  font-size: 12px;
+  &.has-text-danger {
+    color: $red-80 !important;
+  }
+  &.has-text-success {
+    color: $green-50 !important;
+  }
+}
+</style>

package/vue-components/v3/footer/FooterItems.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="footer-items">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.footer-items {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+</style>

package/vue-components/v3/footer/Info.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { defineAsyncComponent } from "vue";
+
+const FooterItems = defineAsyncComponent(() => import("./FooterItems.vue"));
+const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
+
+interface Props {
+  infoData?: Array<Record<string, string>>;
+}
+
+withDefaults(defineProps<Props>(), {
+  infoData: () => [],
+});
+</script>
+
+<template>
+  <footer-items>
+    <footer-item v-for="(data, idx) in infoData" :key="idx + data.key">
+      <span class="">{{ data.key }}:</span>
+      <span>{{ data.value }}</span>
+    </footer-item>
+  </footer-items>
+</template>
+
+<style lang="scss" scoped></style>

package/vue-components/v3/footer/Status.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import { ref, defineAsyncComponent } from "vue";
+const FooterItems = defineAsyncComponent(() => import("./FooterItems.vue"));
+const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
+const HeroiconsCheckBadge = defineAsyncComponent(
+  () => import("~icons/heroicons/check-badge")
+);
+const HeroiconsCrossBadge = defineAsyncComponent(
+  () => import("~icons/heroicons/x-circle")
+);
+const HeroiconsLoadingBadge = defineAsyncComponent(
+  () => import("~icons/heroicons/arrow-path")
+);
+interface Props {
+  statusInfo?: Array<Record<string, string>>;
+}
+
+withDefaults(defineProps<Props>(), {
+  statusInfo: () => [],
+});
+</script>
+
+<template>
+  <footer-items>
+    <footer-item
+      v-for="(item, idx) in statusInfo"
+      :key="idx + item.label"
+      :modifier-classes="item.color"
+    >
+      <span class="icon">
+        <HeroiconsCheckBadge v-if="item.color === `has-text-success`" />
+        <i
+          v-else-if="item.color === `has-text-warning`"
+          class="fa fa-refresh fa-spin fa-fw"
+        ></i>
+        <HeroiconsCrossBadge v-else />
+      </span>
+      <span>{{ item.label }}</span>
+    </footer-item>
+  </footer-items>
+</template>
+
+<style lang="scss" scoped></style>

package/vue-components/v3/footer/Usage.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { defineAsyncComponent } from "vue";
+const FooterItems = defineAsyncComponent(() => import("./FooterItems.vue"));
+const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
+
+interface Props {
+  usages?: Array<{
+    icon?: string;
+    useData?: {
+      limit?: string;
+      request?: string;
+    };
+  }>;
+}
+
+withDefaults(defineProps<Props>(), {
+  usages: () => [],
+});
+</script>
+
+<template>
+  <footer-items>
+    <footer-item v-for="(info, idx) in usages" :key="idx">
+      <span class="icon"><img :src="info.icon" /></span
+      ><span
+        >{{ info.useData?.limit || "N" }}/{{
+          info.useData?.request || "A"
+        }}</span
+      >
+    </footer-item>
+  </footer-items>
+</template>
+
+<style lang="scss" scoped></style>

package/vue-components/v3/form/Form.vue

@@ -1,10 +1,27 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+const FormFooterControl = defineAsyncComponent(
+  () => import("./FormFooterControl.vue")
+);
+
+interface Props {
+  isContainer?: boolean;
+  hasFooter?: boolean;
+  reducePaddingTop?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  isContainer: false,
+  hasFooter: true,
+  reducePaddingTop: false,
+});
+</script>
+
 <template>
   <div class="form-wrapper">
     <div
       :class="{
-        'pt-20': !reducePaddingTop,
-        'pt-10': reducePaddingTop,
-        'pl-20': !isContainer,
         'form-content': !isContainer,
         container: isContainer,
       }"
@@ -22,42 +39,13 @@
           container: isContainer,
         }"
       >
-        <form-footer-controls>
+        <form-footer-control>
           <slot name="form-left-controls" />
-        </form-footer-controls>
-        <form-footer-controls>
+        </form-footer-control>
+        <form-footer-control>
           <slot name="form-right-controls" />
-        </form-footer-controls>
+        </form-footer-control>
       </div>
     </div>
   </div>
 </template>
-
-<script>
-import { defineComponent, defineAsyncComponent, h } from "vue";
-
-export default defineComponent({
-  props: {
-    isContainer: {
-      type: Boolean,
-      default: false,
-    },
-    hasFooter: {
-      type: Boolean,
-      default: true,
-    },
-    reducePaddingTop: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  components: {
-    FormFooterControls: defineAsyncComponent(() =>
-      import("../../v2/form/FormFooterControl.vue").then(
-        (module) => module.default
-      )
-    ),
-  },
-});
-</script>

package/vue-components/v3/form/FormFooter.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="form-footer">
+    <div class="footer-left">
+      <slot name="footer-left" />
+    </div>
+    <div class="footer-right">
+      <slot name="footer-right" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.form-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: -20px;
+  margin-right: -20px;
+  border-top: 1px solid $primary-90;
+  padding: 16px 20px;
+}
+</style>

package/vue-components/v3/form/FormFooterControl.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="form-footer-control">
+    <slot />
+  </div>
+</template>

package/vue-components/v3/form/FormFooterControls.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="form-footer-controls is-flex">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+interface Props {
+  modifierClasses?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modifierClasses: "",
+});
+</script>
+
+<template>
+  <div class="ac-single-input is-small" :class="modifierClasses">
+    <slot name="label" />
+    <slot name="button" />
+    <slot />
+    <slot name="eye-switcher" />
+    <slot name="error" />
+  </div>
+</template>
+
+<style lang="scss"></style>

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="file-upload" data-testid="image-upload-drag-section">
+    <label
+      for="image-upload-with-cropping"
+      class="has-text-centered"
+      title="Click to upload new avatar"
+    >
+      <div class="ms-upload-logo" title="Click to upload new avatar">
+        <div class="upload-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1"
+            stroke="currentColor"
+            class="w-6 h-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+            />
+          </svg>
+        </div>
+      </div>
+      <div class="ms-upload-description">
+        <p class="drag-and-drop-msg">
+          Drag &amp; Drop here <strong>or</strong> Choose image From Storage
+        </p>
+        <p class="img-size-msg">
+          Size should not a exceed 1MB &amp; Dimension prefarable 4096 X 3072
+        </p>
+      </div>
+    </label>
+    <input
+      id="image-upload-with-cropping"
+      type="file"
+      name="image-upload"
+      class="is-hidden"
+      data-testid="image-upload-input"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+// file upload large
+.file-upload {
+  border: 1px dashed $primary-80;
+  border-radius: 4px;
+  &:hover {
+    background-color: $primary-97;
+
+    label {
+      .upload-icon {
+        border: 1px solid $primary-80;
+        svg {
+          color: $primary-10;
+        }
+      }
+    }
+  }
+  label {
+    cursor: pointer;
+    padding: 32px;
+    display: block;
+    .upload-icon {
+      border: 1px solid $primary-90;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      width: 100px;
+      height: 100px;
+      margin-bottom: 24px;
+      padding: 24px;
+
+      svg {
+        color: $primary-30;
+      }
+    }
+    p {
+      color: $primary-10;
+      strong {
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>

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

@@ -1,22 +1,26 @@
+<script setup lang="ts">
+interface Props {
+  modelValue?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  modelValue: "",
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const handleInput = (e: Event) => {
+  const target = e.target as HTMLInputElement;
+  emit("update:modelValue", target.value);
+};
+</script>
+
 <template>
   <input
     class="ac-input"
+    :class="{ 'width-200': modelValue }"
     data-testid="ac-input"
     :value="modelValue"
-    @input="$emit('update:modelValue', $event.target.value)"
+    @input="handleInput"
   />
 </template>
-
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    modelValue: {
-      type: null,
-      default: "",
-    },
-  },
-  emits: ["update:modelValue"],
-});
-</script>

package/vue-components/v3/header/Header.vue

@@ -1,5 +1,24 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+const HeaderItem = defineAsyncComponent(() => import("./HeaderItem.vue"));
+const HeaderItems = defineAsyncComponent(() => import("./HeaderItems.vue"));
+
+interface Props {
+  title?: string;
+  isContainer?: boolean;
+  topValue?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  title: "No Title",
+  isContainer: false,
+  topValue: "86px",
+});
+</script>
+
 <template>
-  <div class="inner-header">
+  <div class="inner-header" :style="{ top: topValue }">
     <div
       class="is-flex is-justify-content-space-between"
       :class="{ container: isContainer }"
@@ -7,7 +26,7 @@
       <header-items>
         <header-item>
           <transition name="fade" mode="out-in" appear>
-            <h5 :key="title">{{ title }}</h5>
+            <h4 :key="title">{{ title }}</h4>
           </transition>
         </header-item>
         <slot name="header-left-controls" />
@@ -19,27 +38,102 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    title: {
-      type: String,
-      default: "No Title",
-    },
-    isContainer: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    HeaderItems: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItems.vue").then((module) => module.default)
-    ),
-    HeaderItem: defineAsyncComponent(() =>
-      import("../../v2/header/HeaderItem.vue").then((module) => module.default)
-    ),
-  },
-});
-</script>
+<style lang="scss" scoped>
+.inner-header {
+  padding: 6px 20px;
+  border-bottom: 1px solid $primary-95;
+  position: sticky;
+  background: $white-100;
+  z-index: 99;
+}
+
+// footer control start
+// .form-footer-controls {
+//   .form-footer-control {
+//     display: inline-block;
+//     margin-left: 8px;
+//     vertical-align: middle;
+
+//     &:first-child {
+//       margin-left: 0;
+//     }
+//   }
+// }
+
+// .dashboard-header {
+//   padding: 10px 20px;
+//   border-radius: 4px;
+//   background-color: $white-100;
+//   min-height: 75px;
+//   display: table;
+//   width: 100%;
+//   border-left: 5px solid $primary;
+//   border-bottom: 1px solid $primary-90;
+//   border-top: 1px solid $primary-90;
+//   border-right: 1px solid $primary-90;
+
+//   .dashboard-header-wrapper {
+//     height: 100%;
+//     display: table;
+//     width: 100%;
+
+//     .dashboard-header-inner {
+//       display: table-cell;
+//       vertical-align: middle;
+//     }
+//   }
+// }
+
+// .dashboard-header-inner-top {
+//   height: 100%;
+//   vertical-align: middle;
+//   display: table-cell;
+// }
+
+// .dashboard-header.is-chart-available {
+//   padding: 10px 30px;
+
+//   .dashboard-header-wrapper {
+//     height: 100%;
+//     display: table;
+//     width: 100%;
+
+//     .dashboard-header-inner {
+//       display: table-cell;
+//       vertical-align: middle;
+//     }
+//   }
+// }
+
+// .resource {
+//   display: flex;
+//   align-items: center;
+//   border-left: 1px solid $primary-90;
+//   padding: 0 1.5rem;
+//   margin-top: -10px;
+//   margin-bottom: -10px;
+//   .r-icon {
+//     display: flex;
+//     align-items: center;
+//     max-width: 40px;
+//   }
+
+//   .r-data {
+//     margin-left: 0.8rem;
+//     .request,
+//     .limit {
+//       font-weight: 500;
+//       min-width: 50px;
+//       text-align: center;
+//     }
+//     .request {
+//       font-weight: 300;
+//     }
+//     hr {
+//       margin: 0;
+//       padding: 0;
+//       background-color: $primary-90;
+//     }
+//   }
+// }
+</style>

package/vue-components/v3/header/HeaderItem.vue

@@ -1,5 +1,23 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="header-item">
     <slot />
   </div>
 </template>
+
+<style lang="scss" scoped>
+.header-item {
+  display: inline-block;
+  margin-left: 8px;
+  vertical-align: middle;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  .select:not(.is-multiple) {
+    height: auto;
+  }
+}
+</style>

package/vue-components/v3/header/HeaderItems.vue

@@ -1,5 +1,9 @@
+<script setup lang="ts"></script>
+
 <template>
   <div class="header-items is-flex is-align-items-center">
     <slot />
   </div>
 </template>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,2 @@
+<script setup lang="ts"></script>
+<template><span>More...</span></template>

package/vue-components/v3/loaders/ClusterSwitcherLoader.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ContentLoader } from "vue-content-loader";
+</script>
+<template>
+  <content-loader
+    viewBox="0 0 300 30"
+    :speed="2"
+    primaryColor="#ffffff"
+    secondaryColor="#ebebf9"
+  >
+    <rect x="0" y="0" rx="5" ry="5" width="300" height="30" />
+  </content-loader>
+</template>

package/vue-components/v3/loaders/InfoCardLoader.vue

@@ -0,0 +1,19 @@
+<script>
+import { ContentLoader } from "vue-content-loader";
+export default { components: { ContentLoader } };
+</script>
+<template>
+  <content-loader
+    viewBox="0 0 230 115"
+    :speed="2"
+    primaryColor="#f5f5f5"
+    secondaryColor="#ecebeb"
+  >
+    <rect x="0" y="0" rx="0" ry="0" />
+    <rect x="0" y="70" rx="3" ry="3" width="120" height="11" />
+    <rect x="0" y="100" rx="3" ry="3" width="120" height="11" />
+    <rect x="150" y="100" rx="3" ry="3" width="60" height="11" />
+    <rect x="0" y="1" rx="3" ry="3" width="230" height="22" />
+    <rect x="0" y="40" rx="3" ry="3" width="120" height="11" />
+  </content-loader>
+</template>

package/vue-components/v3/loaders/ResourceLoader.vue

@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { ContentLoader } from "vue-content-loader";
+</script>
+
 <template>
   <div>
     <content-loader>
@@ -69,15 +73,3 @@
     </content-loader>
   </div>
 </template>
-
-<script>
-  import { defineAsyncComponent, defineComponent } from 'vue'
-  export default defineComponent({
-    name: 'LoaderElement',
-    components: {
-      ContentLoader: defineAsyncComponent(() =>
-        import('vue-content-loader').then((module) => module.ContentLoader)
-      ),
-    },
-  })
-</script>