@vc-shell/framework 1.1.5 → 1.1.7

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: string | number | Date | null | undefined;
+  /**
+   * 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?: "text" | "password" | "email" | "tel" | "number" | "integer" | "url" | "time" | "date" | "datetime-local";
+}
+
+export interface Emits {
+  (event: "update:model-value", value: string | number | Date | null | undefined): 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: string | number | Date | null | undefined;
+    emitValue: (value: string | number | Date | null) => 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();

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/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

@@ -108,7 +108,7 @@
     </div>
   </div>
 </template>
-
+<!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
 import { VcIcon } from "../../../../";
 import { ChevronLeftIcon, ChevronRightIcon } from "../../../../atoms/vc-icon/icons";
@@ -133,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/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>;