@vc-shell/framework 1.0.340 → 1.1.0-alpha.2

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

@@ -1,120 +1,120 @@
-import { ref } from "vue";
-import { VcMultivalue } from ".";
-import { StoryFn, type Meta } from "@storybook/vue3";
-
-const FIELD_TYPE = ["text", "number"];
-
-export default {
-  title: "molecules/VcMultivalue",
-  component: VcMultivalue as Record<keyof typeof VcMultivalue, unknown>,
-  args: {
-    placeholder: "Enter a value",
-    type: "text",
-    label: "Multivalue Field",
-    name: "multivalueField",
-    options: [
-      { id: "1", title: "Option 1" },
-      { id: "2", title: "Option 2" },
-      { id: "3", title: "Option 3" },
-    ],
-    optionValue: "id",
-    optionLabel: "title",
-    multivalue: true,
-  },
-  argTypes: {
-    type: {
-      control: "radio",
-      options: FIELD_TYPE,
-      table: {
-        type: {
-          summary: FIELD_TYPE.join(" | "),
-        },
-      },
-    },
-  },
-} satisfies Meta<typeof VcMultivalue>;
-
-const Template: StoryFn<typeof VcMultivalue> = (args) => ({
-  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `
-      <vc-multivalue v-bind="args" v-model="val"></vc-multivalue>
-  `,
-});
-
-export const Default = Template.bind({});
-
-export const Error = Template.bind({});
-Error.args = { errorMessage: "This is an error", error: true };
-
-export const Disabled = Template.bind({});
-Disabled.args = { disabled: true };
-
-export const Tooltip = Template.bind({});
-Tooltip.args = { tooltip: "This is a tooltip" };
-
-export const SingleValue = Template.bind({});
-SingleValue.args = {
-  multivalue: false,
-};
-
-export const Hint = Template.bind({});
-Hint.args = {
-  hint: "This is a hint",
-};
-
-export const Required = Template.bind({});
-Required.args = {
-  required: true,
-};
-
-export const CustomDropdownItemSlot: StoryFn<typeof VcMultivalue> = (args) => ({
-  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `
-    <vc-multivalue v-bind="args" v-model="val">
-      <template #item="{ item }">
-        <div>
-          <h2 class="tw-font-bold">Item header</h2>
-          <div>{{ item.title }}</div>
-        </div>
-      </template>
-    </vc-multivalue>
-  `,
-});
-
-export const CustomHintSlot: StoryFn<typeof VcMultivalue> = (args) => ({
-  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `
-    <vc-multivalue v-bind="args" v-model="val">
-      <template #hint>
-        <div class="tw-text-red-500">Custom hint</div>
-      </template>
-    </vc-multivalue>
-  `,
-});
-
-export const CustomErrorSlot: StoryFn<typeof VcMultivalue> = (args) => ({
-  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
-  setup() {
-    const val = ref();
-    return { args, val };
-  },
-  template: `
-    <vc-multivalue v-bind="args" v-model="val" error>
-      <template #error>
-        <div class="tw-text-red-500">Custom error</div>
-      </template>
-    </vc-multivalue>
-  `,
-});
+import { ref } from "vue";
+import { VcMultivalue } from ".";
+import { StoryFn, type Meta } from "@storybook/vue3";
+
+const FIELD_TYPE = ["text", "number"];
+
+export default {
+  title: "molecules/VcMultivalue",
+  component: VcMultivalue as Record<keyof typeof VcMultivalue, unknown>,
+  args: {
+    placeholder: "Enter a value",
+    type: "text",
+    label: "Multivalue Field",
+    name: "multivalueField",
+    options: [
+      { id: "1", title: "Option 1" },
+      { id: "2", title: "Option 2" },
+      { id: "3", title: "Option 3" },
+    ],
+    optionValue: "id",
+    optionLabel: "title",
+    multivalue: true,
+  },
+  argTypes: {
+    type: {
+      control: "radio",
+      options: FIELD_TYPE,
+      table: {
+        type: {
+          summary: FIELD_TYPE.join(" | "),
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcMultivalue>;
+
+const Template: StoryFn<typeof VcMultivalue> = (args) => ({
+  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
+  setup() {
+    const val = ref();
+    return { args, val };
+  },
+  template: `
+      <vc-multivalue v-bind="args" v-model="val"></vc-multivalue>
+  `,
+});
+
+export const Default = Template.bind({});
+
+export const Error = Template.bind({});
+Error.args = { errorMessage: "This is an error", error: true };
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const Tooltip = Template.bind({});
+Tooltip.args = { tooltip: "This is a tooltip" };
+
+export const SingleValue = Template.bind({});
+SingleValue.args = {
+  multivalue: false,
+};
+
+export const Hint = Template.bind({});
+Hint.args = {
+  hint: "This is a hint",
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  required: true,
+};
+
+export const CustomDropdownItemSlot: StoryFn<typeof VcMultivalue> = (args) => ({
+  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
+  setup() {
+    const val = ref();
+    return { args, val };
+  },
+  template: `
+    <vc-multivalue v-bind="args" v-model="val">
+      <template #item="{ item }">
+        <div>
+          <h2 class="tw-font-bold">Item header</h2>
+          <div>{{ item.title }}</div>
+        </div>
+      </template>
+    </vc-multivalue>
+  `,
+});
+
+export const CustomHintSlot: StoryFn<typeof VcMultivalue> = (args) => ({
+  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
+  setup() {
+    const val = ref();
+    return { args, val };
+  },
+  template: `
+    <vc-multivalue v-bind="args" v-model="val">
+      <template #hint>
+        <div class="tw-text-red-500">Custom hint</div>
+      </template>
+    </vc-multivalue>
+  `,
+});
+
+export const CustomErrorSlot: StoryFn<typeof VcMultivalue> = (args) => ({
+  components: { VcMultivalue } as Record<keyof typeof VcMultivalue, unknown>,
+  setup() {
+    const val = ref();
+    return { args, val };
+  },
+  template: `
+    <vc-multivalue v-bind="args" v-model="val" error>
+      <template #error>
+        <div class="tw-text-red-500">Custom error</div>
+      </template>
+    </vc-multivalue>
+  `,
+});

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

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

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";