@vc-shell/framework 1.0.39 → 1.0.40

package/{components → ui/components}/molecules/vc-multivalue/vc-multivalue.vue

@@ -11,7 +11,7 @@
     ]"
   >
     <!-- Input label -->
-    <VcLabel v-if="label" class="mb-2" :required="required">
+    <VcLabel v-if="label" class="tw-mb-2" :required="required">
       <span>{{ label }}</span>
       <template v-if="tooltip" v-slot:tooltip>{{ tooltip }}</template>
     </VcLabel>
@@ -25,7 +25,7 @@
       >
         <div class="vc-multivalue__field-value">
           <span
-            class="truncate"
+            class="tw-truncate"
             :title="
               type === 'number' ? Number(item.value).toFixed(3) : item.value
             "
@@ -46,7 +46,7 @@
       <template v-if="multivalue">
         <div
           ref="dropdownToggleRef"
-          class="vc-multivalue__field vc-multivalue__field_dictionary grow basis-0 p-2"
+          class="vc-multivalue__field vc-multivalue__field_dictionary tw-grow tw-basis-0 tw-p-2"
         >
           <VcButton small @click.stop="toggleDropdown">Add +</VcButton>
           <teleport to="#app">
@@ -80,7 +80,7 @@
       </template>
       <template v-else>
         <input
-          class="vc-multivalue__field grow basis-0 pl-3"
+          class="vc-multivalue__field tw-grow tw-basis-0 tw-pl-3"
           :placeholder="placeholder"
           :type="type"
           :value="value"
@@ -91,7 +91,7 @@
     </div>
 
     <slot v-if="errorMessage" name="error">
-      <VcHint class="vc-multivalue__error mt-1">
+      <VcHint class="vc-multivalue__error tw-mt-1">
         {{ errorMessage }}
       </VcHint>
     </slot>
@@ -102,7 +102,7 @@
 import { unref, getCurrentInstance, nextTick, ref, computed } from "vue";
 
 import { useField } from "vee-validate";
-import { VcLabel, VcIcon } from "@/components";
+import { VcLabel, VcIcon } from "@/ui/components";
 import { IValidationRules } from "@/core/types";
 import { createPopper, Instance, State } from "@popperjs/core";
 import { clickOutside as vClickOutside } from "@/core/directives";
@@ -352,96 +352,96 @@ function onSearch(event: InputEvent) {
 }
 
 .vc-multivalue {
-  @apply overflow-hidden;
+  @apply tw-overflow-hidden;
 
   &_date,
   &_datetime-local {
-    @apply max-w-[220px];
+    @apply tw-max-w-[220px];
 
     .vc-app_mobile & {
-      @apply max-w-full;
+      @apply tw-max-w-full;
     }
   }
 
   &__field-wrapper {
-    @apply border border-solid
-    border-[color:var(--multivalue-border-color)]
-    rounded-[var(--multivalue-border-radius)]
-    bg-[color:var(--multivalue-background-color)]
-    items-center
-    flex
-    flex-wrap;
+    @apply tw-border tw-border-solid
+    tw-border-[color:var(--multivalue-border-color)]
+    tw-rounded-[var(--multivalue-border-radius)]
+    tw-bg-[color:var(--multivalue-background-color)]
+    tw-items-center
+    tw-flex
+    tw-flex-wrap;
   }
 
   &__dropdown {
-    @apply flex flex-col box-border
-    max-h-[300px] z-10 overflow-hidden
-    absolute bg-[color:var(--select-background-color)]
-    border border-solid border-[color:var(--select-border-color)]
-    border-t-[color:var(--select-background-color)]
-    rounded-b-[var(--select-border-radius)]
-    p-2;
+    @apply tw-flex tw-flex-col tw-box-border
+    tw-max-h-[300px] 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;
   }
 
   &__search {
-    @apply w-full box-border border border-solid border-[#eaecf2]
-      rounded-[4px] h-8 leading-[32px]
-      outline-none mb-3 px-2;
+    @apply tw-w-full tw-box-border tw-border tw-border-solid tw-border-[#eaecf2]
+      tw-rounded-[4px] tw-h-8 tw-leading-[32px]
+    tw-outline-none tw-mb-3 tw-px-2;
   }
 
   &__item {
-    @apply flex items-center min-h-[36px] px-2 rounded-[3px] cursor-pointer hover:bg-[#eff7fc];
+    @apply tw-flex tw-items-center tw-min-h-[36px] tw-px-2 tw-rounded-[3px] tw-cursor-pointer hover:tw-bg-[#eff7fc];
   }
 
   &_opened &__field-wrapper {
-    @apply rounded-t-[var(--select-border-radius)];
+    @apply tw-rounded-t-[var(--select-border-radius)];
   }
 
   &_error &__field-wrapper {
-    @apply border border-solid border-[color:var(--multivalue-border-color-error)];
+    @apply tw-border tw-border-solid tw-border-[color:var(--multivalue-border-color-error)];
   }
 
   &__error {
-    @apply text-[color:var(--multivalue-border-color-error)];
+    @apply tw-text-[color:var(--multivalue-border-color-error)];
   }
 
   &__field {
-    @apply border-none outline-none h-[var(--multivalue-height)]
-      min-w-[120px] box-border placeholder:text-[color:var(--multivalue-placeholder-color)];
+    @apply tw-border-none tw-outline-none tw-h-[var(--multivalue-height)]
+    tw-min-w-[120px] tw-box-border placeholder:tw-text-[color:var(--multivalue-placeholder-color)];
 
     &::-webkit-input-placeholder {
-      @apply text-[color:var(--multivalue-placeholder-color)];
+      @apply tw-text-[color:var(--multivalue-placeholder-color)];
     }
 
     &::-moz-placeholder {
-      @apply text-[color:var(--multivalue-placeholder-color)];
+      @apply tw-text-[color:var(--multivalue-placeholder-color)];
     }
 
     &::-ms-placeholder {
-      @apply text-[color:var(--multivalue-placeholder-color)];
+      @apply tw-text-[color:var(--multivalue-placeholder-color)];
     }
 
     &-value-wrapper {
-      @apply h-[var(--multivalue-height)] ml-2 flex items-center;
+      @apply tw-h-[var(--multivalue-height)] tw-ml-2 tw-flex tw-items-center;
     }
 
     &-value {
-      @apply bg-[#fbfdfe] border border-solid border-[color:#bdd1df] rounded-[2px]
-        flex items-center h-[28px] box-border px-2 max-w-[150px];
+      @apply tw-bg-[#fbfdfe] tw-border tw-border-solid tw-border-[color:#bdd1df] tw-rounded-[2px]
+      tw-flex tw-items-center tw-h-[28px] tw-box-border tw-px-2 tw-max-w-[150px];
 
       &-clear {
-        @apply text-[#a9bfd2] ml-2 cursor-pointer;
+        @apply tw-text-[#a9bfd2] tw-ml-2 tw-cursor-pointer;
       }
     }
 
     &_dictionary {
-      @apply h-auto min-w-[auto];
+      @apply tw-h-auto tw-min-w-[auto];
     }
   }
 
   &_disabled &__field-wrapper,
   &_disabled &__field {
-    @apply bg-[#fafafa] text-[#424242];
+    @apply tw-bg-[#fafafa] tw-text-[#424242];
   }
 }
 </style>

package/{components → ui/components}/molecules/vc-notification/vc-notification.vue

@@ -1,15 +1,15 @@
 <template>
   <div
-    class="vc-notification flex items-center mt-1 mb-3 mx-2 bg-[color:var(--notification-background)] border border-solid border-[color:#eef0f2] box-border shadow-[2px_2px_11px_rgba(126,142,157,0.4)] rounded-[var(--notification-border-radius)] overflow-hidden py-2 px-4 max-w-[600px]"
+    class="vc-notification tw-flex tw-items-center tw-mt-1 tw-mb-3 tw-mx-2 tw-bg-[color:var(--notification-background)] tw-border tw-border-solid tw-border-[color:#eef0f2] tw-box-border tw-shadow-[2px_2px_11px_rgba(126,142,157,0.4)] tw-rounded-[var(--notification-border-radius)] tw-overflow-hidden tw-py-2 tw-px-4 tw-max-w-[600px]"
     @mouseenter="onMouseEnter"
     @mouseleave="onMouseLeave"
   >
-    <div class="text-[color:var(--notification-content-color)]">
+    <div class="tw-text-[color:var(--notification-content-color)]">
       <slot></slot>
     </div>
     <VcIcon
       icon="fas fa-times"
-      class="cursor-pointer text-[color:var(--notification-dismiss-color)] ml-2"
+      class="tw-cursor-pointer tw-text-[color:var(--notification-dismiss-color)] tw-ml-2"
       size="s"
       @click="onDismiss"
     ></VcIcon>
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/components";
+import { VcIcon } from "@/ui/components";
 
 const props = defineProps({
   variant: {
@@ -95,7 +95,7 @@ function onDismiss() {
   pointer-events: all;
 
   .vc-app_mobile {
-    @apply max-w-[80%];
+    @apply tw-max-w-[80%];
   }
 }
 </style>

package/{components → ui/components}/molecules/vc-pagination/vc-pagination.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vc-pagination flex">
+  <div class="vc-pagination tw-flex">
     <!-- To first page chevron -->
     <div
       class="vc-pagination__item"
@@ -92,7 +92,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "@/components";
+import { VcIcon } from "@/ui/components";
 
 defineProps({
   expanded: {
@@ -119,7 +119,7 @@ defineEmits(["itemClick"]);
   --pagination-item-width: 30px;
   --pagination-item-height: 30px;
   --pagination-item-color: #000000;
-  --pagination-item-color-hover: #000000;
+  --pagination-item-color-hover:tw- #000000;
   --pagination-item-color-current: #ffffff;
   --pagination-item-color-disabled: #9c9c9c;
   --pagination-item-background-color: #ffffff;
@@ -135,34 +135,34 @@ defineEmits(["itemClick"]);
 
 .vc-pagination {
   &__item {
-    @apply flex items-center justify-center w-[var(--pagination-item-width)]
-    h-[var(--pagination-item-height)]
-    bg-[color:var(--pagination-item-background-color)]
-    border border-solid border-[color:var(--pagination-item-border-color)]
-    rounded-[var(--pagination-item-border-radius)]
-    text-[color:var(--pagination-item-color)]
-    box-border cursor-pointer
-    transition duration-200
-    mr-3 select-none last:mr-0
-    hover:bg-[color:var(--pagination-item-background-color-hover)]
-    hover:text-[color:var(--pagination-item-color-hover)]
-    hover:border hover:border-solid
-    hover:border-[color:var(--pagination-item-border-color-hover)];
+    @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-text-[color:var(--pagination-item-color)]
+    tw-box-border tw-cursor-pointer
+    tw-transition  tw-duration-200
+    tw-mr-3 tw-select-none last:tw-mr-0
+    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)];
 
     &_current,
     &_current:hover {
-      @apply bg-[color:var(--pagination-item-background-color-current)]
-      text-[color:var(--pagination-item-color-current)]
-      border border-solid border-[color:var(--pagination-item-border-color-current)]
-      cursor-auto;
+      @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;
     }
 
     &_disabled,
     &_disabled:hover {
-      @apply bg-[color:var(--pagination-item-background-color-disabled)]
-      text-[color:var(--pagination-item-color-disabled)]
-      border border-solid border-[color:var(--pagination-item-border-color-disabled)]
-      cursor-auto;
+      @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;
     }
   }
 }

package/{components → ui/components}/molecules/vc-rating/vc-rating.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="vc-rating">
     <!-- Rating label -->
-    <VcLabel v-if="label" class="mb-2">
+    <VcLabel v-if="label" class="tw-mb-2">
       <span>{{ label }}</span>
       <template v-if="tooltip" v-slot:tooltip>
         <span v-html="tooltip"></span>
@@ -41,7 +41,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon, VcLabel } from "@/components";
+import { VcIcon, VcLabel } from "@/ui/components";
 
 export interface Props {
   label?: string;
@@ -61,17 +61,17 @@ withDefaults(defineProps<Props>(), { max: 5, variant: "stars" });
 }
 
 .vc-rating {
-  @apply align-middle;
+  @apply tw-align-middle;
 
   &__placeholder {
-    @apply text-[color:var(--rating-placeholder-color)];
+    @apply tw-text-[color:var(--rating-placeholder-color)];
   }
   &__icon {
-    @apply text-[color:var(--special-color)] mr-1;
+    @apply tw-text-[color:var(--special-color)] tw-mr-1;
     font-size: inherit;
   }
   &__rating {
-    @apply mr-1;
+    @apply tw-mr-1;
   }
 }
 </style>

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

@@ -0,0 +1,7 @@
+import { ComponentPublicInstance } from "vue";
+import { VcSelectProps } from "./vc-select-model";
+import { ComponentConstructor } from "@/ui/types/ts-helpers";
+import Select from "./vc-select.vue";
+export const VcSelect: ComponentConstructor<
+  ComponentPublicInstance<VcSelectProps>
+> = Select;

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

@@ -0,0 +1,216 @@
+import { VNode } from "vue";
+
+export type OptionProp =
+  | ((option: string | Record<string, unknown>) => string)
+  | string
+  | undefined;
+
+export interface VcSelectProps {
+  /**
+   * Name of select
+   */
+  name?: string | undefined;
+  /**
+   * 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
+   */
+  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 | undefined;
+  /**
+   * Does field have validation errors?
+   */
+  error?: boolean | undefined;
+  /**
+   * Validation error message (gets displayed only if 'error' is set to 'true')
+   */
+  errorMessage?: string | undefined;
+  /**
+   * Select label
+   */
+  label?: string | undefined;
+  /**
+   * Select description (hint) text below input component
+   */
+  hint?: string | undefined;
+  /**
+   * Prefix
+   */
+  prefix?: string | undefined;
+  /**
+   * Suffix
+   */
+  suffix?: string | undefined;
+  /**
+   * Signals the user a process is in progress by displaying a spinner
+   */
+  loading?: boolean | undefined;
+  /**
+   * Appends clearable icon when a value is set;
+   * When clicked, model becomes null
+   */
+  clearable?: boolean | undefined;
+  /**
+   * Put component in disabled mode
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Allow multiple selection; Model must be Array
+   */
+  multiple?: boolean | undefined;
+  /**
+   * Available options that the user can select from.
+   * Default value: []
+   */
+  options?:
+    | ((
+        keyword?: string,
+        skip?: number,
+        ids?: string[]
+      ) => Promise<{
+        results?: Record<string, unknown>[];
+        totalCount?: number;
+      }>)
+    | any[]
+    | undefined;
+  /**
+   * 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 | undefined;
+  /**
+   * Debounce the search input update with an amount of milliseconds
+   * Default value: 500
+   */
+  debounce?: number | string | undefined;
+  /**
+   * Input placeholder text
+   */
+  placeholder?: string | undefined;
+  /**
+   * Input tooltip information
+   */
+  tooltip?: string | undefined;
+  /**
+   * Input required state
+   */
+  required?: boolean | undefined;
+  /**
+   * Input search activation
+   */
+  searchable?: boolean | undefined;
+}
+export interface VcSelectEmits {
+  /**
+   * Emitted when the component needs to change the model; Is also used by v-model
+   * @param event Emitted event name
+   * @param value New model value
+   */
+  (event: "update:modelValue", value: any): void;
+  /**
+   * Emitted when user wants to filter a value
+   * @param event Emitted event name
+   * @param inputValue What the user typed
+   */
+  (event: "search", inputValue: string): void;
+  /**
+   * Emitted when the select options list is hidden
+   * @param event Emitted event name
+   */
+  (event: "close"): void;
+}
+export interface 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[];
+}