@vc-shell/framework 1.0.54 → 1.0.56

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

@@ -1,8 +1,88 @@
-import { ComponentPublicInstance } from "vue";
-import { VcSelectProps, VcSelectEmits } from "./vc-select-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { VNode } from "vue";
 import Select from "./vc-select.vue";
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcSelectSlots = {
+  /**
+   * Custom select control
+   */
+  control?: (scope: { toggleHandler: () => void }) => VNode[];
+  /**
+   * Prepend inner field
+   */
+  "prepend-inner"?: () => VNode[];
+  /**
+   * Append to inner field
+   */
+  "append-inner"?: () => VNode[];
+  /**
+   * Prepend outer field
+   */
+  prepend?: () => VNode[];
+  /**
+   * Append outer field
+   */
+  append?: () => VNode[];
+  /**
+   * What should the menu display after filtering options and none are left to be displayed
+   * @param scope
+   */
+  "no-option"?: () => VNode[];
+  /**
+   * Slot for errors
+   */
+  error?: () => VNode[];
+  /**
+   * Slot for hint text
+   */
+  hint?: () => VNode[];
+  /**
+   * Override default selection slot
+   * @param scope
+   */
+  "selected-item"?: (scope: {
+    /**
+     * Selection index
+     */
+    index: number;
+    /**
+     * Selected option -- its value is taken from model
+     */
+    opt: any;
+    /**
+     * Always true -- passed as prop
+     */
+    selected: boolean;
+    /**
+     * Remove selected option located at specific index
+     * @param index Index at which to remove selection
+     */
+    removeAtIndex: (index: number) => void;
+  }) => VNode[];
+  /**
+   * Override default selection slot;
+   */
+  option?: (scope: {
+    /**
+     * Option index
+     */
+    index: number;
+    /**
+     * Option -- its value is taken from 'options' prop
+     */
+    opt: any;
+    /**
+     * Is option selected?
+     */
+    selected: boolean;
+    /**
+     * Add/remove option from model
+     * @param opt Option to add to model
+     */
+    toggleOption: (opt: any) => void;
+  }) => VNode[];
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const VcSelect: ComponentConstructor<ComponentPublicInstance<VcSelectProps, any, any, any, any, VcSelectEmits>> =
-  Select;
+export const VcSelect: GlobalComponentConstructor<typeof Select, VcSelectSlots> = Select;

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

@@ -24,11 +24,11 @@
     </VcLabel>
 
     <!-- Select field -->
-    <div
-      class="tw-flex tw-flex-nowrap tw-items-start"
-      ref="dropdownToggleRef"
-    >
-      <div class="tw-flex tw-flex-auto tw-text-left tw-max-w-full">
+    <div class="tw-flex tw-flex-nowrap tw-items-start tw-relative">
+      <div
+        ref="dropdownToggleRef"
+        class="tw-flex tw-flex-auto tw-text-left tw-max-w-full"
+      >
         <slot
           name="control"
           :toggleHandler="toggleDropdown"
@@ -198,76 +198,226 @@
         </slot>
       </div>
 
-      <!--      <teleport to="#app">-->
-      <div
-        v-if="isOpened"
-        class="tw-flex tw-flex-col tw-box-border tw-max-h-[300px] tw-h-auto tw-z-10 tw-overflow-hidden tw-absolute tw-bg-[color:var(--select-background-color)] tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-border-t-[color:var(--select-background-color)] tw-rounded-b-[var(--select-border-radius)] tw-p-2"
-        ref="dropdownRef"
-        v-click-outside="closeDropdown"
-      >
-        <input
-          v-if="searchable"
-          ref="searchRef"
-          class="tw-w-full tw-box-border tw-border tw-border-solid tw-border-[#eaecf2] tw-rounded-[4px] tw-h-[32px] tw-leading-[32px] tw-outline-none tw-mb-3 tw-px-2"
-          @input="onInput"
-        />
-
-        <VcContainer
-          :no-padding="true"
-          ref="root"
+      <teleport to="#app">
+        <div
+          v-if="isOpened"
+          class="tw-flex tw-flex-col tw-box-border tw-max-h-[300px] tw-h-auto tw-z-10 tw-overflow-hidden tw-absolute tw-bg-[color:var(--select-background-color)] tw-border tw-border-solid tw-border-[color:var(--select-border-color)] tw-border-t-[color:var(--select-background-color)] tw-rounded-b-[var(--select-border-radius)] tw-p-2"
+          ref="dropdownRef"
+          v-click-outside="closeDropdown"
+          :style="dropdownStyle"
         >
-          <div
-            v-if="!(optionsList && optionsList.length)"
-            class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
+          <input
+            v-if="searchable"
+            ref="searchRef"
+            class="tw-w-full tw-box-border tw-border tw-border-solid tw-border-[#eaecf2] tw-rounded-[4px] tw-h-[32px] tw-leading-[32px] tw-outline-none tw-mb-3 tw-px-2"
+            @input="onInput"
+          />
+
+          <VcContainer
+            :no-padding="true"
+            ref="root"
           >
-            <slot name="no-options">
-              <span class="tw-m-4 tw-text-xl tw-font-medium">No options</span>
-            </slot>
-          </div>
-          <div
-            v-else
-            class="tw-flex tw-items-center tw-min-h-[36px] tw-my-1 tw-box-border tw-px-2 tw-rounded-[3px] tw-cursor-pointer hover:tw-bg-[#eff7fc]"
-            v-for="(item, i) in optionScope"
-            :key="i"
-            @click="item.toggleOption(item.opt)"
-            :class="{ 'tw-bg-[#eff7fc]': item.selected }"
-          >
-            <slot
-              name="option"
-              v-bind="item"
-              >{{ item.label }}</slot
+            <div
+              v-if="!(optionsList && optionsList.length)"
+              class="tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-items-center tw-justify-center"
             >
-          </div>
-          <span
-            ref="el"
-            v-if="hasNextPage"
-          ></span>
-        </VcContainer>
-      </div>
-      <!--      </teleport>-->
+              <slot name="no-options">
+                <span class="tw-m-4 tw-text-xl tw-font-medium">No options</span>
+              </slot>
+            </div>
+            <div
+              v-else
+              class="tw-flex tw-items-center tw-min-h-[36px] tw-my-1 tw-box-border tw-px-2 tw-rounded-[3px] tw-cursor-pointer hover:tw-bg-[#eff7fc]"
+              v-for="(item, i) in optionScope"
+              :key="i"
+              @click="item.toggleOption(item.opt)"
+              :class="{ 'tw-bg-[#eff7fc]': item.selected }"
+            >
+              <slot
+                name="option"
+                v-bind="item"
+                >{{ item.label }}</slot
+              >
+            </div>
+            <span
+              ref="el"
+              v-if="hasNextPage"
+            ></span>
+          </VcContainer>
+        </div>
+      </teleport>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { nextTick, ref, computed, watch, toRefs } from "vue";
+import { ref, computed, watch, toRefs, nextTick } from "vue";
 import { VcIcon, VcLabel, VcContainer } from "./../../../components";
 import { clickOutside as vClickOutside } from "./../../../../core/directives";
-import { createPopper, Instance, State } from "@popperjs/core";
-import { selectEmits, selectProps, OptionProp } from "./vc-select-model";
 import { intersection, isEqual } from "lodash-es";
 import { useIntersectionObserver } from "@vueuse/core";
+import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
+
+export type OptionProp = ((option: string | Record<string, unknown>) => string) | string | undefined;
+
+export interface Props {
+  /**
+   * Name of select
+   */
+  name?: string;
+  /**
+   * Model of the component; Must be Array if using 'multiple' prop; Use this property with a listener for 'update:modelValue' event OR use v-model directive
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  modelValue: any;
+  /**
+   * Try to map labels of model from 'options' Array; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value;
+   * Default value: true
+   */
+  mapOptions?: boolean;
+  /**
+   * Does field have validation errors?
+   */
+  error?: boolean;
+  /**
+   * Validation error message (gets displayed only if 'error' is set to 'true')
+   */
+  errorMessage?: string;
+  /**
+   * Select label
+   */
+  label?: string;
+  /**
+   * Select description (hint) text below input component
+   */
+  hint?: string;
+  /**
+   * Prefix
+   */
+  prefix?: string;
+  /**
+   * Suffix
+   */
+  suffix?: string;
+  /**
+   * Signals the user a process is in progress by displaying a spinner
+   */
+  loading?: boolean;
+  /**
+   * Appends clearable icon when a value is set;
+   * When clicked, model becomes null
+   */
+  clearable?: boolean;
+  /**
+   * Put component in disabled mode
+   */
+  disabled?: boolean;
+  /**
+   * Allow multiple selection; Model must be Array
+   */
+  multiple?: boolean;
+  /**
+   * Available options that the user can select from.
+   * Default value: []
+   */
+  options?:
+    | ((
+        keyword?: string,
+        skip?: number,
+        ids?: string[]
+      ) => Promise<{
+        results?: object[];
+        totalCount?: number;
+      }>)
+    | 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;
+  /**
+   * 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;
+  /**
+   * Update model with the value of the selected option instead of the whole option
+   */
+  emitValue?: boolean;
+  /**
+   * Debounce the search input update with an amount of milliseconds
+   * Default value: 500
+   */
+  debounce?: number | string;
+  /**
+   * Input placeholder text
+   */
+  placeholder?: string;
+  /**
+   * Input tooltip information
+   */
+  tooltip?: string;
+  /**
+   * Input required state
+   */
+  required?: boolean;
+  /**
+   * Input search activation
+   */
+  searchable?: boolean;
+}
 
-const props = defineProps(selectProps);
+export interface Emits {
+  /**
+   * Emitted when the component needs to change the model; Is also used by v-model
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (event: "update:modelValue", inputValue: any): void;
+  /**
+   * Emitted when user wants to filter a value
+   */
+  (event: "search", inputValue: string): void;
+  /**
+   * Emitted when the select options list is hidden
+   */
+  (event: "close"): void;
+}
 
-const emit = defineEmits(selectEmits);
+type FloatingInstanceType = UseFloatingReturn & {
+  middlewareData: {
+    sameWidthChangeBorders: {
+      borderTop?: string;
+      borderBottom?: string;
+      borderRadius?: string;
+      width?: string;
+    };
+  };
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  optionValue: "id",
+  optionLabel: "title",
+  debounce: 500,
+  clearable: true,
+  name: "Field",
+  autofocus: true,
+  emitValue: true,
+  mapOptions: true,
+  placeholder: "Click to select...",
+  options: () => [],
+});
+
+const emit = defineEmits<Emits>();
 
 const { modelValue, options } = toRefs(props);
 
 const isOpened = ref(false);
 
 const searchRef = ref();
-const popper = ref<Instance>();
 const dropdownToggleRef = ref();
 const dropdownRef = ref();
 const root = ref();
@@ -276,10 +426,13 @@ const listLoading = ref(false);
 
 const filterString = ref();
 
-const defaultValue = ref([]);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const defaultValue = ref<any[]>([]);
 
-const optionsList = ref([]);
-const optionsTemp = ref([]);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const optionsList = ref<any[]>([]);
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const optionsTemp = ref<any[]>([]);
 
 const totalItems = ref();
 
@@ -297,6 +450,17 @@ useIntersectionObserver(
   { threshold: 1, root: root.value?.component }
 );
 
+const popper = useFloating(dropdownToggleRef, dropdownRef, {
+  placement: "bottom",
+  whileElementsMounted: autoUpdate,
+  middleware: [
+    flip({ fallbackPlacements: ["top", "bottom"] }),
+    shift({ mainAxis: false }),
+    sameWidthChangeBorders(),
+    offset(-2),
+  ],
+}) as FloatingInstanceType;
+
 watch(
   modelValue,
   async (newVal, oldVal) => {
@@ -320,7 +484,9 @@ watch(
             undefined,
             Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
           );
-          defaultValue.value = data.results.filter((x) => x[props.optionValue as string] === props.modelValue);
+          defaultValue.value = data.results?.filter(
+            (x) => x[props.optionValue as string] === props.modelValue
+          ) as unknown[];
         } else if (props.options && Array.isArray(props.options)) {
           defaultValue.value = props.options.filter((x) => x[props.optionValue as string] === props.modelValue);
         }
@@ -337,7 +503,7 @@ watch(
       try {
         listLoading.value = true;
         const data = await props.options();
-        optionsList.value = data.results;
+        optionsList.value = data.results as unknown[];
         totalItems.value = data.totalCount;
       } finally {
         listLoading.value = false;
@@ -357,12 +523,21 @@ watch(
   { immediate: true, deep: true }
 );
 
+watch(
+  () => popper.isPositioned.value,
+  (newVal) => {
+    if (newVal) {
+      popper.update();
+    }
+  }
+);
+
 async function onLoadMore() {
   if (props.options && typeof props.options === "function") {
     try {
       listLoading.value = true;
       const data = await props.options(filterString.value, optionsList.value.length);
-      optionsList.value.push(...data.results);
+      optionsList.value.push(...(data.results as unknown[]));
     } finally {
       listLoading.value = false;
     }
@@ -432,12 +607,20 @@ const optionScope = computed(() => {
   });
 });
 
+const dropdownStyle = computed(() => {
+  return {
+    top: `${popper.y.value ?? 0}px`,
+    left: `${popper.x.value ?? 0}px`,
+    ...popper.middlewareData.value.sameWidthChangeBorders,
+  };
+});
+
 function getPropValueFn(propValue: OptionProp, defaultVal: OptionProp) {
   const val = propValue !== undefined ? propValue : defaultVal;
 
   return typeof val === "function"
     ? val
-    : (opt) => (opt !== null && typeof opt === "object" && val in opt ? opt[val] : opt);
+    : (opt) => (opt !== null && typeof opt === "object" && (val as string) in opt ? opt[val as string] : opt);
 }
 
 function getOption(value: Record<string, unknown> | string, valueCache: Array<Record<string, unknown> | string>) {
@@ -472,7 +655,6 @@ function isOptionSelected(opt: Record<string, unknown>) {
 
 function closeDropdown() {
   isOpened.value = false;
-  popper.value?.destroy();
   emit("close");
 
   onDropdownClose();
@@ -480,7 +662,7 @@ function closeDropdown() {
 
 const onDropdownClose = async () => {
   if (props.options && typeof props.options === "function") {
-    optionsList.value = (await props.options()).results;
+    optionsList.value = (await props.options()).results as unknown[];
   } else {
     optionsList.value = props.options as Record<string, unknown>[];
   }
@@ -495,71 +677,46 @@ async function toggleDropdown() {
     } else {
       isOpened.value = true;
 
-      await nextTick(() => {
+      nextTick(() => {
         searchRef?.value?.focus();
-        popper.value = createPopper(dropdownToggleRef.value, dropdownRef.value, {
-          placement: "bottom",
-          modifiers: [
-            {
-              name: "flip",
-              options: {
-                fallbackPlacements: ["top", "bottom"],
-              },
-            },
-            {
-              name: "preventOverflow",
-              options: {
-                mainAxis: false,
-              },
-            },
-            {
-              name: "sameWidthChangeBorders",
-              enabled: true,
-              phase: "beforeWrite",
-              requires: ["computeStyles"],
-              fn: ({ state }: { state: State }) => {
-                const placement = state.placement;
-                if (placement === "top") {
-                  state.styles.popper.borderTop = "1px solid var(--select-border-color)";
-                  state.styles.popper.borderBottom = "1px solid var(--select-background-color)";
-                  state.styles.popper.borderRadius = "var(--select-border-radius) var(--select-border-radius) 0 0";
-                } else {
-                  state.styles.popper.borderBottom = "1px solid var(--select-border-color)";
-                  state.styles.popper.borderTop = "1px solid var(--select-background-color)";
-                  state.styles.popper.borderRadius = "0 0 var(--select-border-radius) var(--select-border-radius)";
-                }
-                state.styles.popper.width = `${state.rects.reference.width}px`;
-              },
-              effect: ({ state }: { state: State }) => {
-                const ref = state.elements.reference as HTMLElement;
-                const placement = state.placement;
-                if (placement === "top") {
-                  state.elements.popper.style.borderTop = "1px solid var(--select-border-color)";
-                  state.elements.popper.style.borderBottom = "1px solid var(--select-background-color)";
-                  state.elements.popper.style.borderRadius =
-                    "var(--select-border-radius) var(--select-border-radius) 0 0";
-                } else {
-                  state.elements.popper.style.borderBottom = "1px solid var(--select-border-color)";
-                  state.elements.popper.style.borderTop = "1px solid var(--select-background-color)";
-                  state.elements.popper.style.borderRadius =
-                    "0 0 var(--select-border-radius) var(--select-border-radius)";
-                }
-                state.elements.popper.style.width = `${ref.offsetWidth}px`;
-              },
-            },
-            {
-              name: "offset",
-              options: {
-                offset: [0, -2],
-              },
-            },
-          ],
-        });
       });
     }
   }
 }
 
+function sameWidthChangeBorders() {
+  return {
+    name: "sameWidthChangeBorders",
+    fn: ({ rects, placement, x, y }) => {
+      let borderTop;
+      let borderBottom;
+      let borderRadius;
+      if (placement === "top") {
+        borderTop = "1px solid var(--select-border-color)";
+        borderBottom = "1px solid var(--select-background-color)";
+        borderRadius = "var(--select-border-radius) var(--select-border-radius) 0 0";
+      } else {
+        borderBottom = "1px solid var(--select-border-color)";
+        borderTop = "1px solid var(--select-background-color)";
+        borderRadius = "0 0 var(--select-border-radius) var(--select-border-radius)";
+      }
+
+      const width = `${rects.reference.width}px`;
+
+      return {
+        x,
+        y,
+        data: {
+          borderTop,
+          borderBottom,
+          borderRadius,
+          width,
+        },
+      };
+    },
+  };
+}
+
 function toggleOption(opt: { [x: string]: string }) {
   if (opt === void 0) {
     return;
@@ -594,7 +751,7 @@ function toggleOption(opt: { [x: string]: string }) {
   emit("update:modelValue", model);
 
   if (isOpened.value) {
-    popper.value.update();
+    popper.update();
   }
 }
 
@@ -603,7 +760,7 @@ async function onSearch(value: string) {
   if (props.options && typeof props.options === "function") {
     try {
       listLoading.value = true;
-      optionsTemp.value = (await props.options(filterString.value)).results;
+      optionsTemp.value = (await props.options(filterString.value)).results as unknown[];
     } finally {
       listLoading.value = false;
     }

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

@@ -1,5 +1,12 @@
-import { ComponentPublicInstance } from "vue";
-import { VcSliderProps } from "./vc-slider-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Slider from "./vc-slider.vue";
-export const VcSlider: ComponentConstructor<ComponentPublicInstance<VcSliderProps>> = Slider;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcSliderSlots = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default?: (args: { slide: Record<string, unknown> | any }) => VNode[];
+  prevBtn?: () => VNode[];
+  nextBtn?: () => VNode[];
+};
+
+export const VcSlider: GlobalComponentConstructor<typeof Slider, VcSliderSlots> = Slider;

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

@@ -48,10 +48,22 @@ import SwiperCore, { Navigation } from "swiper";
 import "swiper/swiper-bundle.min.css";
 import "swiper/swiper.min.css";
 import "swiper/components/navigation/navigation.min.css";
-import { sliderProps } from "./vc-slider-model";
-SwiperCore.use([Navigation]);
 
-defineProps(sliderProps);
+export interface Props {
+  slides?: Record<string, unknown>[] | unknown[];
+  navigation?: boolean;
+  overflow?: boolean;
+  slidesPerView?: string | "auto";
+  spaceBetweenSlides?: number;
+}
+
+withDefaults(defineProps<Props>(), {
+  slides: () => [],
+  slidesPerView: "auto",
+  spaceBetweenSlides: 10,
+});
+
+SwiperCore.use([Navigation]);
 
 const buttonsList = computed(() => ({
   nextEl: ".vc-slider__next",

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

@@ -1,8 +1,9 @@
-import { ComponentPublicInstance } from "vue";
-import { VcTextareaEmits, VcTextareaProps } from "./vc-textarea-model";
-import { ComponentConstructor } from "./../../../types/ts-helpers";
+import { VNode } from "vue";
 import Textarea from "./vc-textarea.vue";
-export const VcTextarea: ComponentConstructor<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ComponentPublicInstance<VcTextareaProps, any, any, any, any, VcTextareaEmits>
-> = Textarea;
+import { GlobalComponentConstructor } from "./../../../services/types/ts-helpers";
+
+export type VcTextareaSlots = {
+  error?: () => VNode[];
+};
+
+export const VcTextarea: GlobalComponentConstructor<typeof Textarea, VcTextareaSlots> = Textarea;