@appscode/design-system 1.1.0-alpha.9 → 1.1.0-beta.10

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,23 @@
+<script lang="ts" setup>
+import { ref, defineAsyncComponent } from "vue";
+
+const FooterItems = defineAsyncComponent(() => import("./FooterItems.vue"));
+const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
+
+const dataObj = ref([
+  { key: "VERSION:", value: "10.5.8" },
+  { key: "NAMESPACE:", value: "demo" },
+  { key: "MODE:", value: "Standalone" },
+]);
+</script>
+
+<template>
+  <footer-items>
+    <footer-item v-for="(data, idx) in dataObj" :key="idx">
+      <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,42 @@
+<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 status = ref([
+  {
+    icon: "HeroiconsCheckCircle",
+    label: "Not Exposed",
+    classType: "has-text-warning",
+  },
+  { icon: "HeroiconsXCircle", label: "TLS", classType: "has-text-danger" },
+  {
+    icon: "HeroiconsCheckBadge",
+    label: "Backup",
+    classType: "has-text-success",
+  },
+  {
+    icon: "HeroiconsXCircle",
+    label: "Monitoring",
+    classType: "has-text-danger",
+  },
+]);
+</script>
+
+<template>
+  <footer-items>
+    <footer-item
+      v-for="(item, idx) in status"
+      :key="idx"
+      :modifier-classes="item.classType"
+    >
+      <span class="icon"><HeroiconsCheckBadge :size="20" /></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,44 @@
+<script lang="ts" setup>
+import { defineAsyncComponent, ref } from "vue";
+const FooterItems = defineAsyncComponent(() => import("./FooterItems.vue"));
+const FooterItem = defineAsyncComponent(() => import("./FooterItem.vue"));
+
+const HeroiconsCpuChip = defineAsyncComponent(
+  () => import("~icons/heroicons/cpu-chip")
+);
+
+const usages = ref([
+  {
+    icon: "HeroiconsCpuChip",
+    useData: {
+      limit: "500m",
+      usage: "500m",
+    },
+  },
+  {
+    icon: "HeroiconsCpuChip",
+    useData: {
+      limit: "1G",
+      usage: "1G",
+    },
+  },
+  {
+    icon: "HeroiconsCpuChip",
+    useData: {
+      limit: "10Gi",
+      usage: "10Gi",
+    },
+  },
+]);
+</script>
+
+<template>
+  <footer-items>
+    <footer-item v-for="(type, idx) in usages" :key="idx">
+      <span class="icon"><HeroiconsCpuChip :size="20" /></span
+      ><span>{{ type.useData.limit }}/{{ type.useData.usage }}</span>
+    </footer-item>
+  </footer-items>
+</template>
+
+<style lang="scss" scoped></style>

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

@@ -1,3 +1,23 @@
+<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
@@ -22,42 +42,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/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>