@appscode/design-system 1.1.0 → 2.0.0

package/vue-components/v3/pagination/Pagination.vue

@@ -1,12 +1,113 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+
+interface Props {
+  hideRowsPerPageSelection?: boolean;
+  totalNoOfItems?: number;
+  itemsPerPage?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hideRowsPerPageSelection: false,
+  totalNoOfItems: 0,
+  itemsPerPage: 5,
+});
+
+const emit = defineEmits(["pagination:pagechange", "pagination:countchange"]);
+
+const activePageNo = ref(1);
+const selectedItemCountPerPage = computed({
+  get() {
+    return props.itemsPerPage;
+  },
+  set(n) {
+    activePageNo.value = 1;
+    emit("pagination:countchange", n);
+  },
+});
+
+const noOfPages = computed(() => {
+  return Math.ceil(props.totalNoOfItems / selectedItemCountPerPage.value);
+});
+
+const noOfPageNos = computed(() => {
+  return Math.min(noOfPages.value, 5);
+});
+
+const pageRange = computed(() => {
+  let o = { start: 1, end: 0 };
+  if (noOfPageNos.value < 5) {
+    o.start = 1;
+    o.end = noOfPageNos.value;
+  } else {
+    if (activePageNo.value < 3) {
+      o.start = 1;
+      o.end = 5;
+    } else if (activePageNo.value >= noOfPages.value - 2) {
+      o.start = noOfPages.value - 4;
+      o.end = noOfPages.value;
+    } else {
+      o.start = activePageNo.value - 2;
+      o.end = activePageNo.value + 2;
+    }
+  }
+  return o;
+});
+
+const pages = computed(() => {
+  let ar = [];
+  let start = pageRange.value.start;
+  let end = pageRange.value.end;
+  for (let i = start; i <= end; i++) {
+    ar.push(i);
+  }
+  return ar;
+});
+
+const itemsRange = computed(() => {
+  let start = (activePageNo.value - 1) * selectedItemCountPerPage.value;
+  let end = Math.min(
+    activePageNo.value * selectedItemCountPerPage.value,
+    props.totalNoOfItems
+  );
+
+  return { start, end };
+});
+
+const showPagination = computed(() => {
+  return itemsRange.value.end > itemsRange.value.start;
+});
+
+const prevPage = () => {
+  activePageNo.value = Math.max(activePageNo.value - 1, 1);
+};
+
+const changePage = (page: number) => {
+  activePageNo.value = page;
+};
+
+const nextPage = () => {
+  activePageNo.value = Math.min(activePageNo.value + 1, noOfPages.value);
+};
+
+watch(
+  itemsRange,
+  (n) => {
+    emit("pagination:pagechange", n);
+  },
+  {
+    deep: true,
+    immediate: true,
+  }
+);
+</script>
+
 <template>
   <div class="level inner-table-pagination" v-show="showPagination">
     <div class="pagination-filter level-left">
       <div
         class="level-item"
-        v-show="
-          !hideRowsPerPageSelection &&
-          totalNoOfItems > preSelectedItemsCountPerPage
-        "
+        v-show="!hideRowsPerPageSelection && totalNoOfItems > itemsPerPage"
       >
         <label>Rows per page</label>
         <select
@@ -64,109 +165,122 @@
     </nav>
   </div>
 </template>
+<style lang="scss" scoped>
+.inner-table-pagination {
+  padding: 4px 20px;
+}
 
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  props: {
-    hideRowsPerPageSelection: {
-      type: Boolean,
-      default: false,
-    },
-    totalNoOfItems: {
-      type: Number,
-      default: 0,
-    },
-    preSelectedItemsCountPerPage: {
-      type: Number,
-      default: 5,
-    },
-  },
-  emits: ["pagination:pagechange"],
+.pagination-item {
+  ul {
+    li {
+      display: inline-block;
 
-  data() {
-    return {
-      activePageNo: 1,
-      selectedItemCountPerPage: 5,
-    };
-  },
+      a {
+        display: block;
+        width: 20px;
+        text-align: center;
+        font-size: 13px;
+        font-weight: 500;
+        border-radius: 4px;
+        border: 1px solid $primary-90;
+        color: $primary;
+        margin-left: 4px;
 
-  computed: {
-    noOfPages() {
-      return Math.ceil(this.totalNoOfItems / this.selectedItemCountPerPage);
-    },
-    noOfPageNos() {
-      return Math.min(this.noOfPages, 5);
-    },
-    pageRange() {
-      let o = { start: 1, end: 0 };
-      if (this.noOfPageNos < 5) {
-        o.start = 1;
-        o.end = this.noOfPageNos;
-      } else {
-        if (this.activePageNo < 3) {
-          o.start = 1;
-          o.end = 5;
-        } else if (this.activePageNo > this.noOfPages - 2) {
-          o.start = this.noOfPages - 4;
-          o.end = this.noOfPages;
-        } else {
-          o.start = this.activePageNo - 2;
-          o.end = this.activePageNo + 2;
+        &:hover {
+          background-color: $primary !important;
+          color: $white-100;
+          border: 1px solid $primary-90;
+        }
+
+        &.previous {
+          background-color: $primary-97;
+        }
+
+        &.next {
+          background-color: $primary-97;
+        }
+
+        &.is-current {
+          background-color: $primary;
+          color: $white-100;
         }
       }
-      return o;
-    },
-    pages() {
-      let ar = [];
-      let start = this.pageRange.start;
-      let end = this.pageRange.end;
-      for (let i = start; i <= end; i++) {
-        ar.push(i);
-      }
-      return ar;
-    },
-    itemsRange() {
-      let start = (this.activePageNo - 1) * this.selectedItemCountPerPage;
-      let end = Math.min(
-        this.activePageNo * this.selectedItemCountPerPage,
-        this.totalNoOfItems
-      );
-
-      return { start, end };
-    },
-    showPagination() {
-      return this.itemsRange.end > this.itemsRange.start;
-    },
-  },
+    }
+  }
+}
 
-  created() {
-    this.selectedItemCountPerPage = this.preSelectedItemsCountPerPage;
-  },
+.counting-page,
+.pagination-filter {
+  color: $primary-30;
+  font-size: 12px;
 
-  methods: {
-    prevPage() {
-      this.activePageNo = Math.max(this.activePageNo - 1, 1);
-    },
-    changePage(page) {
-      this.activePageNo = page;
-    },
-    nextPage() {
-      this.activePageNo = Math.min(this.activePageNo + 1, this.noOfPages);
-    },
-  },
+  span {
+    font-weight: 500;
+    padding: 0 4px;
+  }
+}
 
-  watch: {
-    itemsRange: {
-      deep: true,
-      handler(n) {
-        this.$emit("pagination:pagechange", n);
-      },
-    },
-    selectedItemCountPerPage() {
-      this.activePageNo = 1;
-    },
-  },
-});
-</script>
+.pagination-filter {
+  select {
+    background-color: $primary-97;
+    border: 1px solid $primary-90;
+    border-radius: 2px;
+    margin-left: 4px;
+    height: 22px;
+    padding: 0 4px;
+
+    &:focus,
+    &:active,
+    &:focus-visible {
+      border: 1px solid $primary;
+      outline: none;
+    }
+  }
+}
+
+// .counting-page {
+//   color: $primary-20;
+//   font-size: 12px;
+
+//   span {
+//     color: $primary-10;
+//     padding: 0 4px;
+//     font-weight: 500;
+//   }
+// }
+
+// .pagination-filter {
+//   border-radius: 4px;
+//   height: 20px;
+//   font-size: 11px;
+//   background-color: $white-100;
+//   color: $primary-20;
+//   &:focus-visible {
+//     outline: none;
+//   }
+//   select {
+//     border: 1px solid
+//       hsla(
+//         var(--hsl-hue),
+//         var(--hsl-saturation),
+//         calc(var(--hsl-lightness) - 5%),
+//         1
+//       );
+//   }
+
+//   label {
+//     color: $black-40;
+//     padding-right: 5px;
+//     display: inline-block;
+//     font-size: 13px;
+//   }
+// }
+
+// .is-dark-theme {
+//   .pagination-filter {
+//     label {
+//       $black-40: $primary-20;
+//     }
+//   }
+// }
+</style>

package/vue-components/v3/preloader/Preloader.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+interface Props {
+  showSpinner?: boolean;
+  message?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  showSpinner: true,
+  message: "Loading ... ",
+});
+</script>
+
+<template>
+  <div
+    class="is-flex is-justify-content-center is-align-items-center is-flex-direction-column ac-preloader page-loader"
+    style="height: calc(100vh - 200px)"
+  >
+    <span v-if="showSpinner" class="spinner"></span>
+    <p class="font-size-12 mt-10 pl-5">
+      {{ message }}
+    </p>
+  </div>
+</template>

package/vue-components/v3/searchbars/SearchBar.vue

@@ -1,47 +1,63 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch } from "vue";
+
+const AcSingleInput = defineAsyncComponent(
+  () => import("../form-fields/AcSingleInput.vue")
+);
+
+const AcInput = defineAsyncComponent(() => import("../form-fields/Input.vue"));
+
+interface Props {
+  acInputId?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  acInputId: "search",
+});
+
+const emit = defineEmits(["search"]);
+
+const searchText = ref("");
+
+watch(searchText, (n) => {
+  emit("search", n.trim());
+});
+</script>
+
 <template>
-  <ac-single-input modifier-classes="is-extra-small width-200">
+  <ac-single-input modifier-classes="is-extra-small width-auto">
     <template #button>
-      <button class="ac-search-button">
-        <i class="fa fa-search" aria-hidden="true"></i>
-      </button>
+      <label class="ac-search-button" :for="acInputId">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+          class="w-5 h-5"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </label>
     </template>
     <ac-input
       name="search"
       placeholder="Search"
       type="search"
       class="ac-search"
+      :id="acInputId"
       v-model="searchText"
     />
   </ac-single-input>
 </template>
 
-<script>
-import { defineComponent, defineAsyncComponent } from "vue";
-
-export default defineComponent({
-  components: {
-    AcSingleInput: defineAsyncComponent(() =>
-      import("../../v2/form-fields/AcSingleInput.vue").then(
-        (module) => module.default
-      )
-    ),
-    AcInput: defineAsyncComponent(() =>
-      import("../form-fields/Input.vue").then((module) => module.default)
-    ),
-  },
-
-  emits: ["search"],
-
-  data() {
-    return {
-      searchText: "",
-    };
-  },
-
-  watch: {
-    searchText(n) {
-      this.$emit("search", n);
-    },
-  },
-});
-</script>
+<style lang="scss">
+.header-item {
+  .ac-single-input {
+    width: 200px;
+    transition: 0.3s all;
+  }
+}
+</style>

package/vue-components/v3/sidebar/AccentColorPicker.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { ref, computed, watch, nextTick } from "vue";
+
+const accentColor = ref("#1971bd");
+const fontColor = ref("#1c1c1c");
+
+const convertToHsl = (H: string) => {
+  // Convert hex to RGB first
+  let r = 0,
+    g = 0,
+    b = 0;
+  if (H.length == 4) {
+    r = Number("0x" + H[1] + H[1]);
+    g = Number("0x" + H[2] + H[2]);
+    b = Number("0x" + H[3] + H[3]);
+  } else if (H.length == 7) {
+    r = Number("0x" + H[1] + H[2]);
+    g = Number("0x" + H[3] + H[4]);
+    b = Number("0x" + H[5] + H[6]);
+  }
+  // Then to HSL
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  let cmin = Math.min(r, g, b),
+    cmax = Math.max(r, g, b),
+    delta = cmax - cmin,
+    h = 0,
+    s = 0,
+    l = 0;
+
+  if (delta == 0) h = 0;
+  else if (cmax == r) h = ((g - b) / delta) % 6;
+  else if (cmax == g) h = (b - r) / delta + 2;
+  else h = (r - g) / delta + 4;
+
+  h = Math.round(h * 60);
+
+  if (h < 0) h += 360;
+
+  l = (cmax + cmin) / 2;
+  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+
+  return {
+    hue: `${h}`,
+    saturation: `${s}%`,
+    lightness: `${l}%`,
+  };
+};
+
+const accentHsl = computed(() => convertToHsl(accentColor.value));
+const fontHsl = computed(() => convertToHsl(fontColor.value));
+
+watch(
+  accentHsl,
+  (n) => {
+    const { hue, saturation, lightness } = n || {};
+    nextTick(() => {
+      document.documentElement.style.setProperty("--hsl-hue", hue);
+      document.documentElement.style.setProperty(
+        "--hsl-saturation",
+        saturation
+      );
+      document.documentElement.style.setProperty("--hsl-lightness", lightness);
+    });
+  },
+  { deep: true }
+);
+
+watch(
+  fontHsl,
+  (n) => {
+    const { hue, saturation, lightness } = n || {};
+    nextTick(() => {
+      document.documentElement.style.setProperty("--font-hsl-hue", hue);
+      document.documentElement.style.setProperty(
+        "--font-hsl-saturation",
+        saturation
+      );
+      document.documentElement.style.setProperty(
+        "--font-hsl-lightness",
+        lightness
+      );
+    });
+  },
+  { deep: true }
+);
+</script>
+
+<template>
+  <div class="is-flex is-align-items-center is-justify-content-flex-end mr-16">
+    <input title="Accent Color" type="color" v-model="accentColor" />
+    <input title="Font Color" type="color" v-model="fontColor" />
+  </div>
+</template>