@appscode/design-system 1.1.0-beta.70 → 1.1.0-beta.71

package/package.json

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

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 interface Props {
-  modelValue?: string | number;
+  modelValue?: string;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -18,10 +18,9 @@ const handleInput = (e: Event) => {
 <template>
   <input
     class="ac-input"
+    :class="{ 'width-200': modelValue }"
     data-testid="ac-input"
     :value="modelValue"
     @input="handleInput"
   />
 </template>
-
-<style lang="scss" scoped></style>

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

@@ -4,19 +4,27 @@ import { computed, ref, watch } from "vue";
 interface Props {
   hideRowsPerPageSelection?: boolean;
   totalNoOfItems?: number;
-  preSelectedItemsCountPerPage?: number;
+  itemsPerPage?: number;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   hideRowsPerPageSelection: false,
   totalNoOfItems: 0,
-  preSelectedItemsCountPerPage: 5,
+  itemsPerPage: 5,
 });
 
-const emit = defineEmits(["pagination:pagechange"]);
+const emit = defineEmits(["pagination:pagechange", "pagination:countchange"]);
 
 const activePageNo = ref(1);
-const selectedItemCountPerPage = ref(props.preSelectedItemsCountPerPage);
+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);
@@ -35,9 +43,9 @@ const pageRange = computed(() => {
     if (activePageNo.value < 3) {
       o.start = 1;
       o.end = 5;
-    } else if (activePageNo.value > noOfPageNos.value - 2) {
-      o.start = noOfPageNos.value - 4;
-      o.end = noOfPageNos.value;
+    } 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;
@@ -79,7 +87,7 @@ const changePage = (page: number) => {
 };
 
 const nextPage = () => {
-  activePageNo.value = Math.min(activePageNo.value + 1, noOfPageNos.value);
+  activePageNo.value = Math.min(activePageNo.value + 1, noOfPages.value);
 };
 
 watch(
@@ -89,12 +97,9 @@ watch(
   },
   {
     deep: true,
+    immediate: true,
   }
 );
-
-watch(selectedItemCountPerPage, () => {
-  activePageNo.value = 1;
-});
 </script>
 
 <template>
@@ -102,10 +107,7 @@ watch(selectedItemCountPerPage, () => {
     <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
@@ -172,6 +174,7 @@ watch(selectedItemCountPerPage, () => {
   ul {
     li {
       display: inline-block;
+
       a {
         display: block;
         width: 20px;
@@ -188,12 +191,15 @@ watch(selectedItemCountPerPage, () => {
           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;
@@ -207,11 +213,13 @@ watch(selectedItemCountPerPage, () => {
 .pagination-filter {
   color: $primary-30;
   font-size: 12px;
+
   span {
     font-weight: 500;
     padding: 0 4px;
   }
 }
+
 .pagination-filter {
   select {
     background-color: $primary-97;
@@ -220,6 +228,7 @@ watch(selectedItemCountPerPage, () => {
     margin-left: 4px;
     height: 22px;
     padding: 0 4px;
+
     &:focus,
     &:active,
     &:focus-visible {

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

@@ -20,7 +20,7 @@ const emit = defineEmits(["search"]);
 const searchText = ref("");
 
 watch(searchText, (n) => {
-  emit("search", n);
+  emit("search", n.trim());
 });
 </script>