@vc-shell/framework 1.0.164 → 1.0.166

package/ui/components/molecules/vc-breadcrumbs/_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue

@@ -19,36 +19,20 @@
 </template>
 
 <script lang="ts" setup>
+import { Breadcrumbs } from "../../../../../types";
 import { VcIcon } from "./../../../../";
 
-const props = defineProps({
-  current: {
-    type: Boolean,
-    default: false,
-  },
-
-  icon: {
-    type: String,
-    default: undefined,
-  },
-
-  title: {
-    type: String,
-    default: undefined,
-  },
+export interface Props extends Breadcrumbs {
+  current: boolean;
+}
 
-  clickHandler: {
-    type: Function,
-    default: undefined,
-  },
+export interface Emits {
+  (event: "click"): void;
+}
 
-  id: {
-    type: String,
-    default: undefined,
-  },
-});
+const props = defineProps<Props>();
 
-const emit = defineEmits(["click"]);
+const emit = defineEmits<Emits>();
 
 function onClick(): void {
   if (!props.current) {
@@ -74,12 +58,12 @@ function onClick(): void {
 
 .vc-breadcrumbs-item {
   @apply tw-h-[var(--breadcrumbs-item-height)]
-  tw-box-border tw-rounded-[calc(var(--breadcrumbs-item-height)/2)]
+  tw-box-border tw-rounded-[3px]
   tw-border tw-border-solid
   tw-border-[color:var(--breadcrumbs-item-border-color)]
   tw-text-[color:var(--breadcrumbs-item-color)]
   tw-whitespace-nowrap
-  tw-px-3 tw-mr-2
+  tw-px-3
   tw-text-sm tw-cursor-pointer tw-inline-flex tw-items-center
   hover:tw-border
   hover:tw-border-solid

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

@@ -23,17 +23,17 @@ export const Primary: Story = {
         id: "0",
         title: "Back",
         icon: "fas fa-arrow-left",
-        current: false,
+        // current: false,
       },
       {
         id: "1",
         title: "Electronics",
-        current: false,
+        // current: false,
       },
       {
         id: "2",
         title: "Desktop",
-        current: true,
+        // current: true,
       },
     ],
   },

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

@@ -1,7 +1,7 @@
 <template>
   <div
-    v-if="items"
-    class="tw-flex tw-items-center tw-flex-nowrap"
+    v-if="items && items.length"
+    class="tw-flex tw-items-center tw-flex-wrap tw-gap-[10px]"
   >
     <VcBreadcrumbsItem
       v-for="(item, i) in items"
@@ -13,16 +13,11 @@
 </template>
 
 <script lang="ts" setup>
+import { Breadcrumbs } from "../../../types";
 import VcBreadcrumbsItem from "./_internal/vc-breadcrumbs-item/vc-breadcrumbs-item.vue";
 
 export interface Props {
-  items?: {
-    current: boolean;
-    icon?: string;
-    title: string;
-    clickHandler?: () => void;
-    id: string;
-  }[];
+  items?: Breadcrumbs[];
 }
 
 withDefaults(defineProps<Props>(), {

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

@@ -63,7 +63,6 @@ export interface Props {
    * Add button for field content copying
    */
   copyable?: boolean;
-  // TODO Add to documentation
   /**
    * Field orientation
    */

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

@@ -41,7 +41,7 @@
       </template>
     </template>
     <template v-else>
-      <span class="vc-rating__placeholder"></span>
+      <span class="vc-rating__placeholder">{{ placeholder }}</span>
     </template>
   </div>
 </template>

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

@@ -514,7 +514,7 @@ const defaultValue = ref<Option[]>([]) as Ref<Option[]>;
 
 const optionsList = ref<Option[]>([]) as Ref<Option[]>;
 
-const optionsTemp = ref<Option[]>([]) as Ref<Option[]>;
+// const optionsList = ref<Option[]>([]) as Ref<Option[]>;
 
 const totalItems = ref();
 
@@ -525,7 +525,7 @@ let innerValueCache: Option[];
 useIntersectionObserver(
   el,
   ([{ isIntersecting }]) => {
-    if (isIntersecting) {
+    if (isIntersecting && hasNextPage.value) {
       onLoadMore();
     }
   },
@@ -607,7 +607,7 @@ watch(
 watch(
   () => optionsList.value,
   (newVal) => {
-    optionsTemp.value = newVal;
+    optionsList.value = newVal;
   },
   { immediate: true, deep: true },
 );
@@ -627,6 +627,7 @@ async function onLoadMore() {
       listLoading.value = true;
       const data = await props.options(filterString.value, optionsList.value.length);
       optionsList.value.push(...(data.results as Option[]));
+      totalItems.value = data.totalCount;
     } finally {
       listLoading.value = false;
     }
@@ -693,7 +694,7 @@ const hasValue = computed(() => fieldValueIsFilled(innerValue.value));
 const innerOptionsValue = computed(() => innerValue.value.map((opt) => getOptionValue.value(opt)));
 
 const optionScope = computed(() => {
-  return optionsTemp.value.map((opt, i) => {
+  return optionsList.value.map((opt, i) => {
     return {
       index: i,
       opt,
@@ -759,9 +760,11 @@ function closeDropdown() {
 
 const onDropdownClose = async () => {
   if (props.options && typeof props.options === "function") {
-    optionsTemp.value = (await props.options()).results as Option[];
+    const data = await props.options();
+    optionsList.value = data.results as Option[];
+    totalItems.value = data.totalCount;
   } else {
-    optionsTemp.value = props.options as Option[];
+    optionsList.value = props.options as Option[];
   }
 
   filterString.value = undefined;
@@ -857,12 +860,14 @@ async function onSearch(value: string) {
   if (props.options && typeof props.options === "function") {
     try {
       listLoading.value = true;
-      optionsTemp.value = (await props.options(filterString.value)).results as Option[];
+      const data = await props.options(filterString.value);
+      optionsList.value = data.results as Option[];
+      totalItems.value = data.totalCount;
     } finally {
       listLoading.value = false;
     }
   } else {
-    optionsTemp.value = optionsList.value.filter((x: Option) => {
+    optionsList.value = optionsList.value.filter((x: Option) => {
       return (x[props.optionLabel as keyof Option] as string).toLowerCase().includes(filterString.value.toLowerCase());
     });
   }

package/ui/components/organisms/vc-table/vc-table.vue

@@ -507,7 +507,6 @@ const props = withDefaults(
     pages: 0,
     expanded: true,
     currentPage: 0,
-    selectedItemId: undefined,
     header: true,
     footer: true,
     activeFilterCount: 0,
@@ -526,7 +525,6 @@ const emit = defineEmits<{
   selectionChanged: [values: T[]];
   "search:change": [value: string | number | Date | null | undefined];
   headerClick: [item: ITableColumns];
-  value: [Record<string, unknown>];
   itemClick: [item: T];
   "scroll:ptr": [];
   "row:reorder": [args: { dragIndex: number; dropIndex: number; value: T[] }];

package/ui/types/index.ts

@@ -10,4 +10,9 @@ declare module "vue" {
   export interface GlobalComponents extends TGlobalComponents<typeof components> {}
 }
 
-export {};
+export interface Breadcrumbs {
+  icon?: string;
+  title: string;
+  clickHandler?: (id: string) => void | Promise<void>;
+  id: string;
+}