@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

package/ui/components/molecules/vc-pagination/index.ts

@@ -1,3 +1,3 @@
-import _Pagination from "./vc-pagination.vue";
-
-export const VcPagination = _Pagination as typeof _Pagination;
+import _Pagination from "./vc-pagination.vue";
+
+export const VcPagination = _Pagination as typeof _Pagination;

package/ui/components/molecules/vc-pagination/vc-pagination.stories.ts

@@ -1,24 +1,24 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcPagination } from "./";
-
-export default {
-  title: "molecules/VcPagination",
-  component: VcPagination,
-  args: {
-    pages: 20,
-    currentPage: 3,
-  },
-} satisfies Meta<typeof VcPagination>;
-
-export const Template: StoryFn<typeof VcPagination> = (args) => ({
-  components: { VcPagination },
-  setup() {
-    return { args };
-  },
-  template: '<vc-pagination v-bind="args"></vc-pagination>',
-});
-
-export const Expanded = Template.bind({});
-Expanded.args = {
-  // expanded: true,
-};
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcPagination } from "./";
+
+export default {
+  title: "molecules/VcPagination",
+  component: VcPagination,
+  args: {
+    pages: 20,
+    currentPage: 3,
+  },
+} satisfies Meta<typeof VcPagination>;
+
+export const Template: StoryFn<typeof VcPagination> = (args) => ({
+  components: { VcPagination },
+  setup() {
+    return { args };
+  },
+  template: '<vc-pagination v-bind="args"></vc-pagination>',
+});
+
+export const Expanded = Template.bind({});
+Expanded.args = {
+  // expanded: true,
+};

package/ui/components/molecules/vc-pagination/vc-pagination.vue

@@ -2,6 +2,19 @@
   <div class="vc-pagination">
     <!-- Pagination Controls -->
     <div class="vc-pagination__controls">
+      <!-- First page button -->
+      <div
+        class="vc-pagination__item"
+        :class="{ 'vc-pagination__item_disabled': currentPage === 1 }"
+        @click="currentPage !== 1 && setPage(1)"
+      >
+        <VcIcon
+          size="xs"
+          :icon="DoubleArrowLeftIcon"
+        ></VcIcon>
+      </div>
+
+      <!-- Previous page button -->
       <div
         class="vc-pagination__item"
         :class="{ 'vc-pagination__item_disabled': currentPage === 1 }"
@@ -9,7 +22,7 @@
       >
         <VcIcon
           size="xs"
-          icon="fas fa-arrow-left"
+          :icon="ArrowLeftIcon"
         ></VcIcon>
       </div>
 
@@ -19,13 +32,14 @@
         class="vc-pagination__item"
         :class="{
           'vc-pagination__item_current': page === currentPage,
-          'vc-pagination__item_hover': page !== '...' && page !== currentPage,
+          'vc-pagination__item_hover': page !== currentPage,
         }"
         @click="setPage(page)"
       >
         {{ page }}
       </div>
 
+      <!-- Next page button -->
       <div
         class="vc-pagination__item"
         :class="{ 'vc-pagination__item_disabled': currentPage === pages }"
@@ -33,42 +47,29 @@
       >
         <VcIcon
           size="xs"
-          icon="fas fa-arrow-right"
+          :icon="ArrowRightIcon"
         ></VcIcon>
       </div>
 
-      <!-- Jump to page input -->
+      <!-- Last page button -->
       <div
-        v-if="variant === 'default' && pages > 5"
-        class="vc-pagination__jump"
+        class="vc-pagination__item"
+        :class="{ 'vc-pagination__item_disabled': currentPage === pages }"
+        @click="currentPage !== pages && setPage(pages)"
       >
-        <p class="tw-mr-3">{{ $t("COMPONENTS.MOLECULES.VC_PAGINATION.JUMP") }}</p>
-
-        <VcInput
-          type="number"
-          size="small"
-          :model-value="jumpPage"
-          @update:model-value="handleInputChange"
-        >
-          <template #control="{ modelValue }">
-            <input
-              :value="modelValue"
-              class="vc-pagination__input"
-              :max="props.pages"
-              @input="(event) => handleInputChange((event.target as HTMLInputElement)?.value)"
-              @keyup.enter="setPage(jumpPage)"
-              @keydown="onKeyDown"
-            />
-          </template>
-        </VcInput>
+        <VcIcon
+          size="xs"
+          :icon="DoubleArrowRightIcon"
+        ></VcIcon>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, toRefs } from "vue";
-import { VcIcon, VcInput } from "./../../";
+import { ref, computed, toRefs, inject, type Ref } from "vue";
+import { VcIcon } from "./../../";
+import { ArrowLeftIcon, ArrowRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon } from "./../../atoms/vc-icon/icons";
 
 export interface Props {
   expanded?: boolean;
@@ -89,73 +90,39 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-const { currentPage, variant } = toRefs(props);
+const isMobile = inject("isMobile") as Ref<boolean>;
 
-const jumpPage = ref();
+const { currentPage, variant } = toRefs(props);
 
 const setPage = (page: number | string) => {
   if (typeof page === "undefined" || (typeof page === "number" && isNaN(page))) return;
   const pageNumber = typeof page === "string" ? parseInt(page) : page;
-  if (pageNumber < 1 || pageNumber > props.pages || page === "...") return;
+  if (pageNumber < 1 || pageNumber > props.pages) return;
   currentPage.value = pageNumber;
   emit("itemClick", pageNumber);
 };
 
-const handleInputChange = (value: unknown) => {
-  const numberValue: number = typeof value === "string" ? parseInt(value) : Number(value);
-  let parsedValue = numberValue;
-
-  if (parsedValue > props.pages) {
-    parsedValue = props.pages;
-  } else if (parsedValue < 1) {
-    parsedValue = 1;
-  }
-
-  jumpPage.value = parsedValue;
-};
-
-function onKeyDown(e: KeyboardEvent) {
-  const allowedKeys = ["Backspace", "Delete", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
-  if (
-    (!/^\d$/.test(e.key) && !allowedKeys.includes(e.key)) ||
-    (jumpPage.value >= props.pages && e.key !== "Backspace" && e.key !== "Delete")
-  ) {
-    e.preventDefault();
-  }
-}
-
 const pagesToShow = computed(() => {
   const pages = [];
-  const range = 1;
   const totalPages = props.pages;
   const current = currentPage.value;
+  const maxPages = isMobile.value ? 3 : 5;
 
-  if (props.pages <= 5) {
-    for (let i = 1; i <= props.pages; i++) {
+  if (totalPages <= maxPages) {
+    for (let i = 1; i <= totalPages; i++) {
       pages.push(i);
     }
   } else {
-    const addRange = (start: number, end: number) => {
-      for (let i = start; i <= end; i++) {
-        pages.push(i);
-      }
-    };
+    let start = Math.max(1, current - Math.floor(maxPages / 2));
+    const end = Math.min(start + maxPages - 1, totalPages);
 
-    pages.push(1);
-
-    if (current <= 4) {
-      addRange(2, 5);
-      pages.push("...");
-    } else if (current >= totalPages - 3) {
-      pages.push("...");
-      addRange(totalPages - 4, totalPages - 1);
-    } else {
-      pages.push("...");
-      addRange(current - range, current + range);
-      pages.push("...");
+    if (end - start + 1 < maxPages) {
+      start = Math.max(1, end - maxPages + 1);
     }
 
-    pages.push(props.pages);
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
   }
 
   return pages;
@@ -164,9 +131,9 @@ const pagesToShow = computed(() => {
 
 <style lang="scss">
 :root {
-  --pagination-item-width: 30px;
-  --pagination-item-height: 30px;
-  --pagination-item-color: var(--base-text-color, var(--neutrals-950));
+  --pagination-item-width: 29px;
+  --pagination-item-height: 29px;
+  --pagination-item-color: var(--neutrals-500);
   --pagination-item-color-hover: var(--primary-500);
   --pagination-item-color-current: var(--additional-50);
   --pagination-item-color-disabled: var(--neutrals-400);
@@ -184,36 +151,25 @@ const pagesToShow = computed(() => {
 .vc-pagination {
   display: flex;
   align-items: center;
-  gap: 10px;
-
-  &__results {
-    margin-right: 20px;
-  }
-
-  &__page-size {
-    margin-right: 20px;
-  }
 
   &__controls {
     display: flex;
     align-items: center;
+    gap: 8px;
   }
 
   &__item {
     @apply tw-flex tw-items-center tw-justify-center tw-w-[var(--pagination-item-width)]
     tw-h-[var(--pagination-item-height)]
-    tw-bg-[color:var(--pagination-item-background-color)]
-    tw-border tw-border-solid tw-border-[color:var(--pagination-item-border-color)]
-    tw-rounded-[var(--pagination-item-border-radius)]
+    tw-rounded-full
     tw-text-[color:var(--pagination-item-color)]
     tw-box-border
     tw-transition tw-duration-200
-    tw-mr-3 tw-select-none last:tw-mr-0 tw-text-xs tw-cursor-pointer;
+    tw-select-none tw-text-xs tw-cursor-pointer tw-shrink-0 tw-font-semibold;
 
     &:hover {
       @apply tw-bg-[color:var(--pagination-item-background-color-hover)]
       tw-text-[color:var(--pagination-item-color-hover)]
-      tw-border tw-border-solid tw-border-[color:var(--pagination-item-border-color-hover)]
       tw-cursor-pointer;
     }
 
@@ -221,7 +177,6 @@ const pagesToShow = computed(() => {
     &_current:hover {
       @apply tw-bg-[color:var(--pagination-item-background-color-current)]
       tw-text-[color:var(--pagination-item-color-current)]
-      tw-border tw-border-solid tw-border-[color:var(--pagination-item-border-color-current)]
       tw-cursor-auto;
     }
 
@@ -229,30 +184,13 @@ const pagesToShow = computed(() => {
     &_disabled:hover {
       @apply tw-bg-[color:var(--pagination-item-background-color-disabled)]
       tw-text-[color:var(--pagination-item-color-disabled)]
-      tw-border tw-border-solid tw-border-[color:var(--pagination-item-border-color-disabled)]
       tw-cursor-auto;
     }
 
     &_hover {
       @apply hover:tw-bg-[color:var(--pagination-item-background-color-hover)]
-    hover:tw-text-[color:var(--pagination-item-color-hover)]
-    hover:tw-border hover:tw-border-solid
-    hover:tw-border-[color:var(--pagination-item-border-color-hover)] tw-cursor-pointer;
+    hover:tw-text-[color:var(--pagination-item-color-hover)] tw-cursor-pointer;
     }
   }
-
-  &__jump {
-    display: flex;
-    align-items: center;
-  }
-
-  &__jump input {
-    width: 50px;
-    text-align: center;
-  }
-
-  &__input {
-    @apply tw-w-full tw-bg-transparent;
-  }
 }
 </style>

package/ui/components/molecules/vc-radio-button/index.ts

@@ -1 +1 @@
-export { default as VcRadioButton } from "./vc-radio-button.vue";
+export { default as VcRadioButton } from "./vc-radio-button.vue";

package/ui/components/molecules/vc-radio-button/vc-radio-button.stories.ts

@@ -1,97 +1,97 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcRadioButton } from "./";
-import { ref } from "vue";
-
-export default {
-  title: "molecules/VcRadioButton",
-  component: VcRadioButton,
-  args: {
-    modelValue: "Product 1",
-    label: "Product 1",
-    value: "Product 1",
-  },
-  argTypes: {
-    modelValue: {
-      control: "text",
-      table: {
-        type: {
-          summary: "any",
-        },
-      },
-    },
-    value: {
-      control: "text",
-      table: {
-        type: {
-          summary: "any",
-        },
-      },
-    },
-    binary: {
-      control: "boolean",
-    },
-    disabled: {
-      control: "boolean",
-    },
-    name: {
-      control: "text",
-    },
-    error: {
-      control: "boolean",
-    },
-    errorMessage: {
-      control: "text",
-    },
-    label: {
-      control: "text",
-    },
-  },
-} satisfies Meta<typeof VcRadioButton>;
-
-export const Template: StoryFn<typeof VcRadioButton> = (args) => ({
-  components: { VcRadioButton },
-  setup() {
-    return { args };
-  },
-  template: '<vc-radio-button v-bind="args">{{args.default}}</vc-radio-button>',
-});
-
-export const Group: StoryFn<typeof VcRadioButton> = (args) => ({
-  components: { VcRadioButton },
-  setup() {
-    const products = ref([
-      { id: 1, name: "Product 1" },
-      { id: 2, name: "Product 2" },
-      { id: 3, name: "Product 3" },
-    ]);
-    const selectedProduct = ref("Product 1");
-    return { args, products, selectedProduct };
-  },
-  template: `
-  <div v-for="product in products" :key="product.id" class="tw-pb-1">
-    <vc-radio-button v-model="selectedProduct" :value="product.name" :label="product.name" />
-  </div>`,
-});
-
-export const StringGroup: StoryFn<typeof VcRadioButton> = (args) => ({
-  components: { VcRadioButton },
-  setup() {
-    const products = ref(["Product 1", "Product 2", "Product 3"]);
-    const selectedProduct = ref("Product 1");
-
-    return { args, products, selectedProduct };
-  },
-  template: `
-  <div v-for="product in products" :key="product" class="tw-pb-1">
-    <vc-radio-button v-model="selectedProduct" :value="product" :label="product" />
-  </div>`,
-});
-
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true };
-
-export const Error = Template.bind({});
-Error.args = { errorMessage: "This is an error message", error: true, modelValue: null };
-
-export const Label = Template.bind({});
-Label.args = { label: "Radio button label" };
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcRadioButton } from "./";
+import { ref } from "vue";
+
+export default {
+  title: "molecules/VcRadioButton",
+  component: VcRadioButton,
+  args: {
+    modelValue: "Product 1",
+    label: "Product 1",
+    value: "Product 1",
+  },
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: {
+        type: {
+          summary: "any",
+        },
+      },
+    },
+    value: {
+      control: "text",
+      table: {
+        type: {
+          summary: "any",
+        },
+      },
+    },
+    binary: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    name: {
+      control: "text",
+    },
+    error: {
+      control: "boolean",
+    },
+    errorMessage: {
+      control: "text",
+    },
+    label: {
+      control: "text",
+    },
+  },
+} satisfies Meta<typeof VcRadioButton>;
+
+export const Template: StoryFn<typeof VcRadioButton> = (args) => ({
+  components: { VcRadioButton },
+  setup() {
+    return { args };
+  },
+  template: '<vc-radio-button v-bind="args">{{args.default}}</vc-radio-button>',
+});
+
+export const Group: StoryFn<typeof VcRadioButton> = (args) => ({
+  components: { VcRadioButton },
+  setup() {
+    const products = ref([
+      { id: 1, name: "Product 1" },
+      { id: 2, name: "Product 2" },
+      { id: 3, name: "Product 3" },
+    ]);
+    const selectedProduct = ref("Product 1");
+    return { args, products, selectedProduct };
+  },
+  template: `
+  <div v-for="product in products" :key="product.id" class="tw-pb-1">
+    <vc-radio-button v-model="selectedProduct" :value="product.name" :label="product.name" />
+  </div>`,
+});
+
+export const StringGroup: StoryFn<typeof VcRadioButton> = (args) => ({
+  components: { VcRadioButton },
+  setup() {
+    const products = ref(["Product 1", "Product 2", "Product 3"]);
+    const selectedProduct = ref("Product 1");
+
+    return { args, products, selectedProduct };
+  },
+  template: `
+  <div v-for="product in products" :key="product" class="tw-pb-1">
+    <vc-radio-button v-model="selectedProduct" :value="product" :label="product" />
+  </div>`,
+});
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const Error = Template.bind({});
+Error.args = { errorMessage: "This is an error message", error: true, modelValue: null };
+
+export const Label = Template.bind({});
+Label.args = { label: "Radio button label" };

package/ui/components/molecules/vc-radio-button/vc-radio-button.vue

@@ -10,6 +10,7 @@
         :class="{
           'vc-radio-button_error': error,
         }"
+        tabindex="0"
         @change="onChange"
       />
 
@@ -97,15 +98,18 @@ function onChange() {
 
 <style lang="scss">
 :root {
-  --radio-active: var(--primary-400);
+  --radio-active: var(--primary-500);
   --radio-active-inner: var(--additional-50);
-  --radio-border: var(--secondary-300);
-  --radio-border-hover: var(--primary-400);
+  --radio-border: var(--neutrals-400);
+
   --radio-background: var(--additional-50);
   --radio-disabled: var(--secondary-100);
   --radio-disabled-inner: var(--secondary-200);
-  --radio-error: var(--base-error-color, var(--danger-500));
-  --radio-size: 14px;
+  --radio-error: var(--danger-500);
+  --radio-size: 20px;
+
+  // Outline
+  --radio-border-outline: var(--primary-50);
 }
 
 .vc-radio-button {
@@ -123,7 +127,7 @@ function onChange() {
     position: relative;
     margin: 0;
     cursor: pointer;
-    border: 1px solid var(--radio-border-color, var(--radio-border));
+    border: 2px solid var(--radio-border-color, var(--radio-border));
     background: var(--radio-bg, var(--radio-background));
     width: var(--radio-size);
     transition:
@@ -132,8 +136,8 @@ function onChange() {
       box-shadow 0.2s;
 
     &:after {
-      width: 12px;
-      height: 12px;
+      width: 16px;
+      height: 16px;
       border-radius: 50%;
       background: var(--radio-active-inner);
       opacity: 0;
@@ -176,6 +180,7 @@ function onChange() {
       &:not(:checked) {
         &:not(:disabled) {
           --radio-border-color: var(--radio-border-hover);
+          outline: 3px solid var(--radio-border-outline);
         }
       }
     }

package/ui/components/molecules/vc-rating/index.ts

@@ -1 +1 @@
-export { default as VcRating } from "./vc-rating.vue";
+export { default as VcRating } from "./vc-rating.vue";