@vc-shell/framework 1.1.4 → 1.1.6

package/ui/components/molecules/vc-input-dropdown/vc-input-dropdown.vue

@@ -0,0 +1,268 @@
+<template>
+  <VcSelect
+    class="vc-input-dropdown"
+    :options="options"
+    :option-label="optionLabel"
+    :option-value="optionValue"
+    :searchable="searchable"
+    :debounce="debounce"
+    :disabled="disabled"
+    :label="label"
+    :required="required"
+    :model-value="option"
+    :tooltip="tooltip"
+    @update:model-value="$emit('update:option', $event)"
+  >
+    <template #control="{ toggleHandler }">
+      <VcInput
+        :placeholder="placeholder"
+        :hint="hint"
+        :clearable="clearable"
+        :prefix="prefix"
+        :suffix="suffix"
+        :name="name"
+        :model-value="modelValue"
+        :loading="loading"
+        :disabled="disabled"
+        :autofocus="autofocus"
+        :error="error"
+        :error-message="errorMessage"
+        :maxlength="maxlength"
+        :type="inputType"
+        class="vc-input-dropdown__input"
+        @update:model-value="$emit('update:model-value', $event)"
+        @blur="$emit('blur', $event)"
+      >
+        <template #append-inner>
+          <slot
+            name="button"
+            :toggle-handler="toggleHandler"
+          >
+            <template v-if="options && options.length">
+              <button
+                class="vc-input-dropdown__toggle-button"
+                tabindex="0"
+                @click.stop.prevent="toggleHandler"
+                @keydown.enter.stop.prevent="toggleHandler"
+                @keydown.space.stop.prevent="toggleHandler"
+              >
+                {{ unref(option) }}
+              </button>
+            </template>
+          </slot>
+          <slot
+            v-if="$slots['append-inner']"
+            name="append-inner"
+          ></slot>
+        </template>
+        <template
+          v-if="$slots.control"
+          #control="scope"
+        >
+          <slot
+            name="control"
+            v-bind="scope"
+          ></slot>
+        </template>
+        <template
+          v-if="$slots['prepend-inner']"
+          #prepend-inner
+        >
+          <slot name="prepend-inner"></slot>
+        </template>
+        <template
+          v-if="$slots['append']"
+          #append
+        >
+          <slot name="append"></slot>
+        </template>
+        <template
+          v-if="$slots['prepend']"
+          #prepend
+        >
+          <slot name="prepend"></slot>
+        </template>
+      </VcInput>
+    </template>
+  </VcSelect>
+</template>
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+<script lang="ts" setup>
+import { unref } from "vue";
+import { VcSelect, VcInput } from "./../../";
+import { OptionProp } from "../vc-select/vc-select.vue";
+
+export interface Props {
+  /**
+   * Model of the input component
+   */
+  modelValue: unknown;
+  /**
+   * Input label text
+   */
+  label?: string;
+  /**
+   * Input placeholder text
+   */
+  placeholder?: string;
+  /**
+   * Input description (hint) text below input component
+   */
+  hint?: string;
+  /**
+   * Appends clearable icon when a value is set;
+   * When clicked, model becomes null
+   */
+  clearable?: boolean;
+  /**
+   * Prefix
+   */
+  prefix?: string;
+  /**
+   * Suffix
+   */
+  suffix?: string;
+  /**
+   * Used to specify the name of the control; If not specified, it takes the value 'Field'
+   */
+  name?: string;
+  /**
+   * Signals the user a process is in progress by displaying a spinner
+   */
+  loading?: boolean;
+  /**
+   * Debounce amount (in milliseconds) for search input
+   * Default: 0
+   */
+  debounce?: string | number;
+  /**
+   * Put component in disabled mode
+   */
+  disabled?: boolean;
+  /**
+   * Focus field on initial component render
+   */
+  autofocus?: boolean;
+  /**
+   * Does field have validation errors?
+   */
+  error?: boolean;
+  /**
+   * Validation error message (gets displayed only if 'error' is set to 'true')
+   */
+  errorMessage?: string;
+  /**
+   * Specify a max length of model
+   * Default value: 1024
+   */
+  maxlength?: string | number;
+  /**
+   * Input tooltip information
+   */
+  tooltip?: string;
+  /**
+   * Input required state
+   */
+  required?: boolean;
+  /**
+   * Option label
+   */
+  option?: unknown;
+  /**
+   * Available options that the user can select from.
+   * Default value: []
+   */
+  options?: unknown[];
+  /**
+   * Property of option which holds the 'value'
+   * Default value: id
+   * @param option The current option being processed
+   * @returns Value of the current option
+   */
+  optionValue?: OptionProp<unknown>;
+  /**
+   * Property of option which holds the 'label'
+   * Default value: title
+   * @param option The current option being processed
+   * @returns Label of the current option
+   */
+  optionLabel?: OptionProp<unknown>;
+  /**
+   * Enable search in dropdown
+   */
+  searchable?: boolean;
+  /**
+   * Type of the input field
+   * Default: text
+   */
+  inputType?: string;
+}
+
+export interface Emits {
+  (event: "update:model-value", value: unknown): void;
+  (event: "update:option", value: unknown): void;
+  (event: "change", value: unknown): void;
+  (event: "blur", value: Event): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  debounce: 0,
+  searchable: false,
+  inputType: "text",
+});
+
+defineSlots<{
+  /**
+   * Slot for custom dropdown open handler
+   */
+  button: (scope: {
+    /**
+     * Dropdown open/close handler
+     */
+    toggleHandler: () => void;
+  }) => unknown;
+  /**
+   * Slot for custom append-inner content
+   */
+  "append-inner": (props: any) => any;
+  /**
+   * Slot for custom prepend-inner content
+   */
+  "prepend-inner": (props: any) => any;
+  /**
+   * Slot for custom append content
+   */
+  append: (props: any) => any;
+  /**
+   * Slot for custom prepend content
+   */
+  prepend: (props: any) => any;
+  /**
+   * Slot for custom input control
+   */
+  control: (scope: {
+    placeholder: string;
+    focused: boolean;
+    modelValue: unknown;
+    emitValue: (value: unknown) => void;
+  }) => unknown;
+}>();
+
+defineEmits<Emits>();
+</script>
+
+<style lang="scss">
+:root {
+  --input-dropdown-toggle-color: var(--primary-500);
+}
+
+.vc-input-dropdown {
+  &__input {
+    @apply tw-w-full;
+  }
+
+  &__toggle-button {
+    @apply tw-text-[color:var(--input-dropdown-toggle-color)] tw-not-italic tw-font-medium tw-text-sm tw-cursor-pointer;
+  }
+}
+</style>

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

@@ -231,8 +231,8 @@ const emit = defineEmits<Emits<T>>();
 defineSlots<{
   option: (args: { item: T }) => any;
   "selected-item": (args: { value: string | number | T[keyof T]; item: T; remove: () => void }) => any;
-  hint: void;
-  error: void;
+  hint: (props: any) => any;
+  error: (props: any) => any;
 }>();
 
 const dropdownToggleRef = ref();
@@ -539,7 +539,7 @@ function onSearch(event: Event) {
 
   &__field {
     @apply tw-border-none tw-outline-none tw-min-h-[var(--multivalue-height)] tw-bg-[color:var(--multivalue-background-color)]
-      tw-min-w-[120px] tw-box-border placeholder:tw-text-[color:var(--multivalue-placeholder-color)] tw-text-sm tw-rounded-[var(--multivalue-border-radius)];
+      tw-flex-grow tw-flex-shrink tw-w-auto tw-box-border placeholder:tw-text-[color:var(--multivalue-placeholder-color)] tw-text-sm tw-rounded-[var(--multivalue-border-radius)];
 
     &::-webkit-input-placeholder {
       @apply tw-text-[color:var(--multivalue-placeholder-color)];

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

@@ -5,8 +5,8 @@
       <!-- First page button -->
       <div
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': currentPage === 1 }"
-        @click="currentPage !== 1 && setPage(1)"
+        :class="{ 'vc-pagination__item_disabled': localCurrentPage === 1 }"
+        @click="localCurrentPage !== 1 && setPage(1)"
       >
         <VcIcon
           size="xs"
@@ -17,8 +17,8 @@
       <!-- Previous page button -->
       <div
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': currentPage === 1 }"
-        @click="currentPage !== 1 && setPage(currentPage - 1)"
+        :class="{ 'vc-pagination__item_disabled': localCurrentPage === 1 }"
+        @click="localCurrentPage !== 1 && setPage(localCurrentPage - 1)"
       >
         <VcIcon
           size="xs"
@@ -31,8 +31,8 @@
         :key="page"
         class="vc-pagination__item"
         :class="{
-          'vc-pagination__item_current': page === currentPage,
-          'vc-pagination__item_hover': page !== currentPage,
+          'vc-pagination__item_current': page === localCurrentPage,
+          'vc-pagination__item_hover': page !== localCurrentPage,
         }"
         @click="setPage(page)"
       >
@@ -42,8 +42,8 @@
       <!-- Next page button -->
       <div
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': currentPage === pages }"
-        @click="currentPage !== pages && setPage(currentPage + 1)"
+        :class="{ 'vc-pagination__item_disabled': localCurrentPage === pages }"
+        @click="localCurrentPage !== pages && setPage(localCurrentPage + 1)"
       >
         <VcIcon
           size="xs"
@@ -54,8 +54,8 @@
       <!-- Last page button -->
       <div
         class="vc-pagination__item"
-        :class="{ 'vc-pagination__item_disabled': currentPage === pages }"
-        @click="currentPage !== pages && setPage(pages)"
+        :class="{ 'vc-pagination__item_disabled': localCurrentPage === pages }"
+        @click="localCurrentPage !== pages && setPage(pages)"
       >
         <VcIcon
           size="xs"
@@ -67,7 +67,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, toRefs, inject, type Ref } from "vue";
+import { ref, computed, toRefs, inject, type Ref, watch } from "vue";
 import { VcIcon } from "./../../";
 import { ArrowLeftIcon, ArrowRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon } from "./../../atoms/vc-icon/icons";
 
@@ -92,20 +92,29 @@ const emit = defineEmits<Emits>();
 
 const isMobile = inject("isMobile") as Ref<boolean>;
 
-const { currentPage, variant } = toRefs(props);
+const { variant } = toRefs(props);
+const localCurrentPage = ref(props.currentPage);
+
+watch(
+  () => props.currentPage,
+  (newValue) => {
+    localCurrentPage.value = newValue;
+  },
+  { immediate: true },
+);
 
 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) return;
-  currentPage.value = pageNumber;
+  localCurrentPage.value = pageNumber;
   emit("itemClick", pageNumber);
 };
 
 const pagesToShow = computed(() => {
   const pages = [];
   const totalPages = props.pages;
-  const current = currentPage.value;
+  const current = localCurrentPage.value;
   const maxPages = isMobile.value ? 3 : 5;
 
   if (totalPages <= maxPages) {

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

@@ -51,7 +51,7 @@
     </div>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { VNode } from "vue";
 import { VcLabel, VcIcon } from "./../../";
@@ -68,7 +68,7 @@ export interface Props {
 withDefaults(defineProps<Props>(), { max: 5, variant: "stars" });
 
 defineSlots<{
-  details: VNode[];
+  details: (props: any) => VNode[];
 }>();
 </script>
 

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

@@ -51,7 +51,7 @@
     </slot>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { ref } from "vue";
 import { VcHint, VcLabel } from "./../../";
@@ -76,7 +76,7 @@ export interface Emits {
 }
 
 defineSlots<{
-  error: void;
+  error: (props: any) => any;
 }>();
 
 withDefaults(defineProps<Props>(), {

package/ui/components/organisms/vc-app/_internal/vc-app-bar/_internal/AppBarHeader.vue

@@ -132,10 +132,10 @@ const hasUnread = computed(() => {
     }
 
     &-image {
-      @apply tw-cursor-pointer tw-max-w-[var(--app-bar-logo-width)] tw-max-h-[var(--app-bar-logo-height)] tw-rounded-full tw-overflow-hidden tw-w-full tw-shrink-0;
+      @apply tw-cursor-pointer tw-max-w-[var(--app-bar-logo-width)] tw-max-h-[var(--app-bar-logo-height)] tw-overflow-hidden tw-w-full tw-shrink-0;
 
       &--mobile {
-        @apply tw-mx-1 tw-max-w-[var(--app-bar-logo-mobile-width)] tw-max-h-[var(--app-bar-logo-mobile-height)];
+        @apply tw-mx-1 tw-max-w-[var(--app-bar-logo-mobile-width)] tw-max-h-[var(--app-bar-logo-mobile-height)] tw-rounded-full;
       }
     }
   }

package/ui/components/organisms/vc-app/_internal/vc-app-bar/_internal/AppBarWidgetItem.vue

@@ -38,7 +38,7 @@
     </VcTooltip>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { ref, computed, onMounted, type Component } from "vue";
 import { useAppBarWidgets } from "./../composables/useAppBarWidgets";
@@ -59,8 +59,8 @@ const props = defineProps<Props>();
 const emit = defineEmits<Emits>();
 
 defineSlots<{
-  content: (props: { opened: boolean; toggle: () => void }) => void;
-  trigger: (props: { isActive: boolean; toggle: () => void }) => void;
+  content: (props: { opened: boolean; toggle: () => void }) => any;
+  trigger: (props: { isActive: boolean; toggle: () => void }) => any;
 }>();
 
 const { toggleWidget, currentWidget } = useAppBarWidgets();

package/ui/components/organisms/vc-app/_internal/vc-app-bar/_internal/MenuSidebar.vue

@@ -62,7 +62,7 @@
     </template>
   </Sidebar>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { Sidebar } from "../../../../../../../shared/components/sidebar";
 import { CrossSignIcon } from "../../../../../atoms/vc-icon/icons";
@@ -78,11 +78,11 @@ defineEmits<{
 }>();
 
 defineSlots<{
-  navmenu: () => void;
-  "user-dropdown": () => void;
-  "app-switcher": () => void;
-  "widgets-active-content": () => void;
-  widgets: () => void;
+  navmenu: (props: any) => any;
+  "user-dropdown": (props: any) => any;
+  "app-switcher": (props: any) => any;
+  "widgets-active-content": (props: any) => any;
+  widgets: (props: any) => any;
 }>();
 </script>
 

package/ui/components/organisms/vc-app/_internal/vc-app-bar/vc-app-bar.vue

@@ -26,9 +26,8 @@
             <VcIcon
               v-show="true"
               class="vc-app-bar__collapse-button-icon"
-              :icon="ChevronLeftIcon"
+              :icon="state.isSidebarExpanded ? ChevronLeftIcon : ChevronRightIcon"
               size="xs"
-              :class="{ 'rotate-180': !state.isSidebarExpanded }"
             />
           </Transition>
         </div>
@@ -109,10 +108,10 @@
     </div>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { VcIcon } from "../../../../";
-import { ChevronLeftIcon } from "../../../../atoms/vc-icon/icons";
+import { ChevronLeftIcon, ChevronRightIcon } from "../../../../atoms/vc-icon/icons";
 import { useAppMenuState } from "../composables/useAppMenuState";
 import { useAppBarWidgets } from "./composables/useAppBarWidgets";
 import AppBarHeader from "./_internal/AppBarHeader.vue";
@@ -134,9 +133,9 @@ export interface Emits {
 }
 
 interface Slots {
-  "app-switcher": () => void;
-  navmenu: () => void;
-  "user-dropdown": () => void;
+  "app-switcher": (props: any) => any;
+  navmenu: (props: any) => any;
+  "user-dropdown": (props: any) => any;
 }
 
 defineProps<Props>();

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

@@ -65,7 +65,7 @@
     </div>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { inject, provide, useAttrs, watch, ref, onUnmounted, computed } from "vue";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
@@ -115,8 +115,7 @@ defineOptions({
 });
 
 defineSlots<{
-  "app-switcher": void;
-  // toolbar: void;
+  "app-switcher": (props: any) => any;
 }>();
 
 const props = defineProps<Props>();

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-buttons/_internal/vc-blade-toolbar-button/props.ts

@@ -0,0 +1,14 @@
+import { Ref, ComputedRef } from "vue";
+
+export interface Props {
+  id?: string;
+  icon?: string | (() => string);
+  disabled?: boolean | ComputedRef<boolean | undefined>;
+  title?: string | Ref<string> | ComputedRef<string>;
+  size?: "s" | "m";
+  separator?: "left" | "right" | "both";
+  contentDirection?: "row" | "row-reverse" | "column";
+  iconClassName?: string;
+  titleClassName?: string;
+  onClick?: () => Promise<void> | void;
+}

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-buttons/_internal/vc-blade-toolbar-button/vc-blade-toolbar-base-button.vue

@@ -34,19 +34,8 @@
 <script lang="ts" setup>
 import { ref, ComputedRef, Ref } from "vue";
 import { VcIcon } from "../../../../../../../../";
+import type { Props } from "./props";
 
-export interface Props {
-  id?: string;
-  icon?: string | (() => string);
-  disabled?: boolean | ComputedRef<boolean | undefined>;
-  title?: string | Ref<string> | ComputedRef<string>;
-  size?: "s" | "m";
-  separator?: "left" | "right" | "both";
-  contentDirection?: "row" | "row-reverse" | "column";
-  iconClassName?: string;
-  titleClassName?: string;
-  onClick?: () => Promise<void> | void;
-}
 
 const props = withDefaults(defineProps<Props>(), {
   disabled: false,

package/ui/components/organisms/vc-blade/_internal/vc-blade-toolbar/_internal/vc-blade-toolbar-buttons/_internal/vc-blade-toolbar-button/vc-blade-toolbar-circle-button.vue

@@ -16,7 +16,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 import VcBladeToolbarBaseButton from "./vc-blade-toolbar-base-button.vue";
-import type { Props as BaseButtonProps } from "./vc-blade-toolbar-base-button.vue";
+import type { Props as BaseButtonProps } from "./props";
 
 export interface Props extends Omit<BaseButtonProps, "size" | "contentDirection" | "iconClassName"> {
   isMain?: boolean;

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

@@ -123,7 +123,7 @@
     </div>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { computed, ref, toValue, inject, useSlots, defineComponent, h } from "vue";
 import { IBladeToolbar } from "../../../../core/types";
@@ -168,8 +168,8 @@ withDefaults(defineProps<Props>(), {
 });
 
 const slots = defineSlots<{
-  actions: void;
-  default: void;
+  actions: (props: any) => any;
+  default: (props: any) => any;
   /**
    * @deprecated
    * Use `useWidgets` composable instead
@@ -197,8 +197,8 @@ const slots = defineSlots<{
    *   }
    * });
    */
-  widgets: void;
-  backButton: void;
+  widgets: (props: any) => any;
+  backButton: (props: any) => any;
 }>();
 
 const emit = defineEmits<Emits>();

package/ui/components/organisms/vc-login-form/vc-login-form.vue

@@ -20,7 +20,7 @@
     </div>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { computed } from "vue";
 import { useRouter } from "vue-router";
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 defineSlots<{
-  default: void;
+  default: (props: any) => any;
 }>();
 
 const router = useRouter();

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

@@ -119,7 +119,7 @@
     </Dialog>
   </TransitionRoot>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { Ref, computed, inject } from "vue";
 import { TransitionRoot, TransitionChild, Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
@@ -146,9 +146,9 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<Emits>();
 
 defineSlots<{
-  header: void;
-  content: void;
-  footer: (props: { close: () => void }) => void;
+  header: (props: any) => any;
+  content: (props: any) => any;
+  footer: (props: { close: () => void }) => any;
 }>();
 
 const isMobile = inject("isMobile") as Ref<boolean>;

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

@@ -287,7 +287,7 @@ import VcInputCurrency from "../../../../molecules/vc-input-currency/vc-input-cu
 import VcInput from "../../../../molecules/vc-input/vc-input.vue";
 import VcTooltip from "../../../../atoms/vc-tooltip/vc-tooltip.vue";
 import { Field } from "vee-validate";
-import type { TableItem } from "../../vc-table.vue";
+import type { TableItem } from "../../types";
 import { ITableColumns } from "../../../../../../core/types";
 
 export interface Props {

package/ui/components/organisms/vc-table/_internal/vc-table-column-switcher/vc-table-column-switcher.vue

@@ -41,7 +41,7 @@
 <script lang="ts" setup>
 import { ref, watch } from "vue";
 import { ITableColumns } from "./../../../../../../core/types";
-import { TableColPartial } from "../../vc-table.vue";
+import { TableColPartial } from "../../types";
 import { GenericDropdown } from "../../../../../../shared/components/generic-dropdown";
 
 export interface Props {