@vc-shell/framework 1.0.38 → 1.0.40

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

@@ -0,0 +1,169 @@
+<template>
+  <div class="vc-pagination tw-flex">
+    <!-- To first page chevron -->
+    <div
+      class="vc-pagination__item"
+      :class="{
+        'vc-pagination__item_disabled': currentPage === 1,
+      }"
+      @click="currentPage !== 1 && $emit('itemClick', 1)"
+    >
+      <VcIcon size="xs" icon="fas fa-angle-double-left"></VcIcon>
+    </div>
+
+    <!-- To previous page arrow -->
+    <div
+      class="vc-pagination__item"
+      :class="{
+        'vc-pagination__item_disabled': currentPage === 1,
+      }"
+      @click="currentPage !== 1 && $emit('itemClick', currentPage - 1)"
+    >
+      <VcIcon size="xs" icon="fas fa-arrow-left"></VcIcon>
+    </div>
+
+    <template v-if="expanded && $isDesktop.value">
+      <!-- To preprevious page with number -->
+      <div
+        v-if="currentPage > 2"
+        class="vc-pagination__item"
+        @click="$emit('itemClick', currentPage - 2)"
+      >
+        {{ currentPage - 2 }}
+      </div>
+
+      <!-- To previous page with number -->
+      <div
+        v-if="currentPage > 1"
+        class="vc-pagination__item"
+        @click="$emit('itemClick', currentPage - 1)"
+      >
+        {{ currentPage - 1 }}
+      </div>
+    </template>
+
+    <!-- Current page -->
+    <div class="vc-pagination__item vc-pagination__item_current">
+      {{ currentPage }}
+    </div>
+
+    <template v-if="expanded && $isDesktop.value">
+      <!-- To next page with number -->
+      <div
+        v-if="currentPage < pages"
+        class="vc-pagination__item"
+        @click="$emit('itemClick', currentPage + 1)"
+      >
+        {{ currentPage + 1 }}
+      </div>
+
+      <!-- To postnext page with number -->
+      <div
+        v-if="currentPage < pages - 1"
+        class="vc-pagination__item"
+        @click="$emit('itemClick', currentPage + 2)"
+      >
+        {{ currentPage + 2 }}
+      </div>
+    </template>
+
+    <!-- To next page arrow -->
+    <div
+      class="vc-pagination__item"
+      :class="{
+        'vc-pagination__item_disabled': currentPage === pages,
+      }"
+      @click="currentPage !== pages && $emit('itemClick', currentPage + 1)"
+    >
+      <VcIcon size="xs" icon="fas fa-arrow-right"></VcIcon>
+    </div>
+
+    <!-- To last page chevron -->
+    <div
+      class="vc-pagination__item"
+      :class="{
+        'vc-pagination__item_disabled': currentPage === pages,
+      }"
+      @click="currentPage !== pages && $emit('itemClick', pages)"
+    >
+      <VcIcon size="xs" icon="fas fa-angle-double-right"></VcIcon>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon } from "@/ui/components";
+
+defineProps({
+  expanded: {
+    type: Boolean,
+    default: false,
+  },
+
+  pages: {
+    type: Number,
+    default: 1,
+  },
+
+  currentPage: {
+    type: Number,
+    default: 1,
+  },
+});
+
+defineEmits(["itemClick"]);
+</script>
+
+<style lang="scss">
+:root {
+  --pagination-item-width: 30px;
+  --pagination-item-height: 30px;
+  --pagination-item-color: #000000;
+  --pagination-item-color-hover:tw- #000000;
+  --pagination-item-color-current: #ffffff;
+  --pagination-item-color-disabled: #9c9c9c;
+  --pagination-item-background-color: #ffffff;
+  --pagination-item-background-color-hover: #dfeef9;
+  --pagination-item-background-color-current: #43b0e6;
+  --pagination-item-background-color-disabled: #ffffff;
+  --pagination-item-border-radius: 3px;
+  --pagination-item-border-color: #eaecf2;
+  --pagination-item-border-color-hover: #eaecf2;
+  --pagination-item-border-color-current: #eaecf2;
+  --pagination-item-border-color-disabled: #eaecf2;
+}
+
+.vc-pagination {
+  &__item {
+    @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 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 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;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,23 @@
+/**
+ * Rating component.
+ * @author Aleksandr Vishnyakov <av@virtoway.com>
+ */
+import { Story } from "@storybook/vue3";
+import VcRating from "./vc-rating.vue";
+
+export default {
+  title: "atoms/vc-rating",
+  component: VcRating,
+};
+
+const Template: Story = (args) => ({
+  components: { VcRating },
+  setup() {
+    return { args };
+  },
+  template: '<vc-rating v-bind="args"></vc-rating>',
+});
+
+export const Rating = Template.bind({});
+Rating.storyName = "vc-rating";
+Rating.args = {};

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

@@ -0,0 +1,77 @@
+<template>
+  <div class="vc-rating">
+    <!-- Rating label -->
+    <VcLabel v-if="label" class="tw-mb-2">
+      <span>{{ label }}</span>
+      <template v-if="tooltip" v-slot:tooltip>
+        <span v-html="tooltip"></span>
+      </template>
+    </VcLabel>
+
+    <!-- Rating icon -->
+    <template v-if="rating">
+      <template v-if="variant == 'stars'">
+        <VcIcon
+          v-for="index in rating"
+          :key="index"
+          icon="fas fa-star"
+          class="vc-rating__icon"
+        ></VcIcon>
+        <VcIcon
+          v-for="index in max - rating"
+          :key="index"
+          icon="far fa-star"
+          class="vc-rating__icon"
+        ></VcIcon>
+      </template>
+      <template v-else>
+        <VcIcon
+          v-if="variant == 'star-and-text'"
+          icon="fas fa-star"
+          class="vc-rating__icon"
+        ></VcIcon>
+        <span class="vc-rating__rating">{{ rating }}/{{ max }}</span>
+        <slot name="details"></slot>
+      </template>
+    </template>
+    <template v-else>
+      <span class="vc-rating__placeholder"></span>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon, VcLabel } from "@/ui/components";
+
+export interface Props {
+  label?: string;
+  placeholder?: string;
+  tooltip?: string;
+  rating: number | undefined;
+  max?: number;
+  variant?: "stars" | "star-and-text" | "text";
+}
+
+withDefaults(defineProps<Props>(), { max: 5, variant: "stars" });
+</script>
+
+<style lang="scss">
+:root {
+  --rating-placeholder-color: #a5a5a5;
+}
+
+.vc-rating {
+  @apply tw-align-middle;
+
+  &__placeholder {
+    @apply tw-text-[color:var(--rating-placeholder-color)];
+  }
+  &__icon {
+    @apply tw-text-[color:var(--special-color)] tw-mr-1;
+    font-size: inherit;
+  }
+  &__rating {
+    @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[];
+}