@vc-shell/framework 1.0.60 → 1.0.61

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

@@ -171,6 +171,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, unref, watch } from "vue";
+import { VcLabel, VcIcon, VcHint } from "./../../";
 
 export interface Props {
   /**

package/ui/components/molecules/vc-input-currency/vc-input-currency.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcInputCurrency } from "./";
+import { VcSelect, VcInput } from "./../../";
+import { ref } from "vue";
+
+const meta: Meta<typeof VcInputCurrency> = {
+  title: "molecules/VcInputCurrency",
+  component: VcInputCurrency,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcInputCurrency>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcInputCurrency, VcSelect, VcInput },
+    setup() {
+      const price = ref(0);
+      const option = ref("USD");
+      return { args, price, option };
+    },
+    template:
+      '<vc-input-currency v-bind="args" v-model:modelValue.number="price" v-model:option="option"></vc-input-currency>',
+  }),
+  args: {
+    label: "Label",
+    placeholder: "Placeholder",
+    options: [
+      {
+        title: "USD",
+        value: "USD",
+      },
+      {
+        title: "EUR",
+        value: "EUR",
+      },
+    ],
+    optionLabel: "title",
+    optionValue: "value",
+  },
+};

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

@@ -58,6 +58,7 @@
 <script lang="ts" setup>
 import { useCurrencyInput, CurrencyDisplay } from "vue-currency-input";
 import { watch } from "vue";
+import { VcSelect, VcInput } from "./../../";
 
 export type OptionProp = ((option: string | Record<string, unknown>) => string) | string | undefined;
 

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

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../components";
+import { VcIcon } from "./../../";
 
 export interface Props {
   timeout?: number;

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

@@ -1,23 +1,21 @@
-/**
- * Pagination component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcPagination from "./vc-pagination.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcPagination } from "./";
 
-export default {
-  title: "molecules/vc-pagination",
+const meta: Meta<typeof VcPagination> = {
+  title: "molecules/VcPagination",
   component: VcPagination,
 };
 
-const Template: Story = (args) => ({
-  components: { VcPagination },
-  setup() {
-    return { args };
-  },
-  template: '<vc-pagination v-bind="args"></vc-pagination>',
-});
+export default meta;
+type Story = StoryObj<typeof VcPagination>;
 
-export const Pagination = Template.bind({});
-Pagination.storyName = "vc-pagination";
-Pagination.args = {};
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcPagination },
+    setup() {
+      return { args };
+    },
+    template: '<vc-pagination v-bind="args"></vc-pagination>',
+  }),
+  args: {},
+};

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

@@ -104,7 +104,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../components";
+import { VcIcon } from "./../../";
 
 export interface Props {
   expanded?: boolean;

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

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

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

@@ -47,7 +47,7 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon, VcLabel } from "./../../../components";
+import { VcLabel, VcIcon } from "./../../";
 
 export interface Props {
   label?: string;

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcSelect } from "./";
+
+const meta: Meta<typeof VcSelect> = {
+  title: "molecules/VcSelect",
+  component: VcSelect,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcSelect>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcSelect },
+    setup() {
+      return { args };
+    },
+    template: '<vc-select v-bind="args"></vc-select>',
+  }),
+  args: {
+    options: [
+      {
+        title: "123",
+        label: "First label",
+      },
+      {
+        title: "222",
+        label: "Second label",
+      },
+      {
+        title: "333",
+        label: "Third label",
+      },
+    ],
+    optionLabel: "label",
+    optionValue: "title",
+  },
+};

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

@@ -252,11 +252,11 @@
 
 <script lang="ts" setup>
 import { ref, computed, watch, toRefs, nextTick } from "vue";
-import { VcIcon, VcLabel, VcContainer } from "./../../../components";
 import { clickOutside as vClickOutside } from "./../../../../core/directives";
-import { intersection, isEqual } from "lodash-es";
+import * as _ from "lodash-es";
 import { useIntersectionObserver } from "@vueuse/core";
 import { useFloating, UseFloatingReturn, offset, flip, shift, autoUpdate } from "@floating-ui/vue";
+import { VcLabel, VcContainer, VcHint, VcIcon } from "./../../";
 
 export type OptionProp = ((option: string | Record<string, unknown>) => string) | string | undefined;
 
@@ -269,7 +269,7 @@ export interface Props {
    * 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;
+  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
@@ -487,7 +487,7 @@ watch(
     if (newVal && !oldVal) {
       const initial = optionsList.value.filter((x) => {
         if (props.modelValue && Array.isArray(props.modelValue)) {
-          return intersection(optionsList.value, props.modelValue);
+          return _.intersection(optionsList.value, props.modelValue);
         } else if (props.modelValue && typeof props.modelValue === "object") {
           return optionsList.value.includes(props.modelValue);
         } else {
@@ -650,7 +650,7 @@ function getPropValueFn(propValue: OptionProp, defaultVal: OptionProp) {
 }
 
 function getOption(value: Record<string, unknown> | string, valueCache: Array<Record<string, unknown> | string>) {
-  const fn = (opt) => isEqual(getOptionValue.value(opt), value) || isEqual(getDisplayValue.value(opt), value);
+  const fn = (opt) => _.isEqual(getOptionValue.value(opt), value) || _.isEqual(getDisplayValue.value(opt), value);
   return defaultValue.value.find(fn) || optionsList.value.find(fn) || valueCache.find(fn) || value;
 }
 
@@ -677,7 +677,7 @@ function removeAtIndex(index: number) {
 function isOptionSelected(opt: Record<string, unknown>) {
   const val = getOptionValue.value(opt) || getDisplayValue.value(opt);
 
-  return innerOptionsValue.value.find((v) => isEqual(v, val)) !== void 0;
+  return innerOptionsValue.value.find((v) => _.isEqual(v, val)) !== void 0;
 }
 
 function closeDropdown() {
@@ -752,7 +752,7 @@ function toggleOption(opt: { [x: string]: string }) {
   const optValue = getOptionValue.value(opt) || getDisplayValue.value(opt);
 
   if (props.multiple !== true) {
-    if (innerValue.value.length === 0 || isEqual(getOptionValue.value(innerValue.value[0]), optValue) !== true) {
+    if (innerValue.value.length === 0 || _.isEqual(getOptionValue.value(innerValue.value[0]), optValue) !== true) {
       emit("update:modelValue", props.emitValue === true ? optValue : opt);
       isOpened.value = false;
     }
@@ -766,7 +766,7 @@ function toggleOption(opt: { [x: string]: string }) {
   }
 
   const model = props.modelValue.slice();
-  const index = innerOptionsValue.value.findIndex((v) => isEqual(v, optValue));
+  const index = innerOptionsValue.value.findIndex((v) => _.isEqual(v, optValue));
 
   if (index > -1) {
     model.splice(index, 1);

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

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcSlider } from ".";
+import { VcImage, VcIcon } from "../..";
+
+const meta: Meta<typeof VcSlider> = {
+  title: "molecules/VcSlider",
+  component: VcSlider,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcSlider>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcSlider, VcImage, VcIcon },
+    setup() {
+      return { args };
+    },
+    template:
+      '<div class="tw-flex tw-h-[400px] tw-w-full"><vc-slider v-bind="args" class="tw-w-full"><template v-slot:default="{slide}"><div class="tw-w-10"><vc-image :src="slide.url" size="xl"></vc-image></div></template></vc-slider></div>',
+  }),
+  args: {
+    navigation: true,
+    slidesPerView: "2",
+    slides: [
+      {
+        title: "Title1",
+        name: "Name1",
+        url: "https://placekitten.com/200/150",
+      },
+      {
+        title: "Title2",
+        name: "Name2",
+        url: "https://placekitten.com/200/150",
+      },
+      {
+        title: "Title3",
+        name: "Name3",
+        url: "https://placekitten.com/200/150",
+      },
+      {
+        title: "Title4",
+        name: "Name4",
+        url: "https://placekitten.com/200/150",
+      },
+    ],
+  },
+};

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

@@ -42,6 +42,7 @@
 </template>
 
 <script lang="ts" setup>
+import { VcIcon } from "./../../";
 import { computed } from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import SwiperCore, { Navigation } from "swiper";

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

@@ -1,23 +1,21 @@
-/**
- * Textarea component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcTextarea from "./vc-textarea.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcTextarea } from "./";
 
-export default {
-  title: "atoms/vc-textarea",
+const meta: Meta<typeof VcTextarea> = {
+  title: "molecules/VcTextarea",
   component: VcTextarea,
 };
 
-const Template: Story = (args) => ({
-  components: { VcTextarea },
-  setup() {
-    return { args };
-  },
-  template: '<vc-textarea v-bind="args"></vc-textarea>',
-});
+export default meta;
+type Story = StoryObj<typeof VcTextarea>;
 
-export const Textarea = Template.bind({});
-Textarea.storyName = "vc-textarea";
-Textarea.args = {};
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcTextarea },
+    setup() {
+      return { args };
+    },
+    template: '<vc-textarea v-bind="args"></vc-textarea>',
+  }),
+  args: {},
+};

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

@@ -46,7 +46,7 @@
 
 <script lang="ts" setup>
 import { watch } from "vue";
-import { VcLabel } from "./../../../components";
+import { VcHint, VcLabel } from "./../../";
 
 export interface Props {
   placeholder?: string;

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

@@ -28,7 +28,7 @@
         v-if="blades.length === 1"
         class="tw-overflow-ellipsis tw-overflow-hidden tw-whitespace-nowrap tw-text-2xl tw-leading-header tw-ml-2"
       >
-        {{ blades[0].title }}
+        {{ blades[0].exposed.title }}
       </div>
 
       <!-- Show back link when more than one blade is opened -->
@@ -92,22 +92,18 @@
 </template>
 
 <script lang="ts" setup>
-import { VcIcon } from "./../../../../../components";
+import { VcIcon, VcLink } from "./../../../../";
 import { IBladeToolbar } from "./../../../../../../core/types";
-import { IBladeElement } from "./../../../../../../shared";
+import { IBladeRef } from "./../../../../../../shared";
 
 export interface Props {
   logo: string;
-  blades: IBladeElement[];
+  blades: IBladeRef[];
   buttons: IBladeToolbar[];
   title?: string;
 }
 
-withDefaults(defineProps<Props>(), {
-  logo: "",
-  blades: () => [],
-  buttons: () => [],
-});
+defineProps<Props>();
 
 defineEmits(["logo:click", "backlink:click", "toolbarbutton:click", "menubutton:click"]);
 </script>

package/ui/components/organisms/vc-app/_internal/vc-app-menu/_internal/vc-app-menu-item/_internal/vc-app-menu-link.vue

@@ -38,6 +38,7 @@
 </template>
 <script lang="ts" setup>
 import { ExtendedComponent } from "./../../../../../../../../../shared";
+import { VcIcon } from "./../../../../../../../";
 
 export interface Props {
   isActive?: boolean;

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

@@ -83,7 +83,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import VcAppMenuItem from "./_internal/vc-app-menu-item/vc-app-menu-item.vue";
-import { VcContainer } from "./../../../../../components";
+import { VcContainer, VcIcon } from "./../../../../";
 import { IMenuItems } from "./../../../../../../core/types";
 import { IMenuClickEvent } from "./../../../../../../shared";
 

package/ui/components/organisms/vc-app/vc-app.stories.ts

@@ -1,75 +1,61 @@
-/**
- * App component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcApp from "./vc-app.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcApp } from "./";
 
-export default {
-  title: "organisms/vc-app",
+const meta: Meta<typeof VcApp> = {
+  title: "organisms/VcApp",
   component: VcApp,
-  parameters: {
-    backgrounds: {
-      default: "default",
-      values: [
-        {
-          name: "default",
-          value:
-            "linear-gradient(180deg, #E4F5FB 5.06%, #E8F3F2 100%), linear-gradient(0deg, #E8F2F3, #E8F2F3), #EEF2F8;",
-        },
-      ],
-    },
-  },
 };
 
-const Template: Story = (args) => ({
-  components: { VcApp },
-  setup() {
-    return { args };
-  },
-  template: '<vc-app v-bind="args"></vc-app>',
-});
+export default meta;
+type Story = StoryObj<typeof VcApp>;
 
-export const App = Template.bind({});
-App.storyName = "vc-app";
-App.args = {
-  menuItems: [
-    {
-      title: "Dashboard",
-      icon: "fas fa-home",
-      isVisible: true,
-    },
-    {
-      title: "Orders",
-      icon: "fas fa-file-alt",
-      isVisible: true,
-    },
-    {
-      title: "Products",
-      icon: "fas fa-box-open",
-      isVisible: true,
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcApp },
+    setup() {
+      return { args };
     },
-    {
-      title: "Offers",
-      icon: "fas fa-file-invoice",
-      isVisible: true,
-    },
-    {
-      title: "Import",
-      icon: "fas fa-file-import",
-      isVisible: true,
-    },
-    {
-      title: "Logout",
-      icon: "fas fa-sign-out-alt",
-    },
-  ],
-  toolbarItems: [
-    { id: 1, icon: "fas fa-globe", title: "Language selector" },
-    { id: 2, icon: "fas fa-bell", title: "Notifications", isAccent: true },
-  ],
-  isReady: true,
-  isAuthorized: true,
-  version: "0.0.100",
-  logo: "images/main-logo.svg",
+    template: '<vc-app v-bind="args"></vc-app>',
+  }),
+  args: {
+    menuItems: [
+      {
+        title: "Dashboard",
+        icon: "fas fa-home",
+        isVisible: true,
+      },
+      {
+        title: "Orders",
+        icon: "fas fa-file-alt",
+        isVisible: true,
+      },
+      {
+        title: "Products",
+        icon: "fas fa-box-open",
+        isVisible: true,
+      },
+      {
+        title: "Offers",
+        icon: "fas fa-file-invoice",
+        isVisible: true,
+      },
+      {
+        title: "Import",
+        icon: "fas fa-file-import",
+        isVisible: true,
+      },
+      {
+        title: "Logout",
+        icon: "fas fa-sign-out-alt",
+      },
+    ],
+    toolbarItems: [
+      { id: "1", icon: "fas fa-globe", title: "Language selector" },
+      { id: "2", icon: "fas fa-bell", title: "Notifications", isAccent: true },
+    ],
+    isReady: true,
+    isAuthorized: true,
+    version: "0.0.100",
+    logo: "images/main-logo.svg",
+  },
 };

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

@@ -19,7 +19,7 @@
       @toolbarbutton:click="onToolbarButtonClick"
       @menubutton:click="($refs.menu as Record<'isMobileVisible', boolean>).isMobileVisible = true"
       @backlink:click="$emit('backlink:click', bladesRefs.length - 2)"
-      @logo:click="openDashboard"
+      @logo:click="$emit('logo:click')"
       :title="title"
     >
       <template v-slot:appSwitcher>
@@ -39,7 +39,7 @@
       ></VcAppMenu>
 
       <!-- Workspace blades -->
-      <div class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0">
+      <div class="vc-app__workspace tw-px-2 tw-w-full tw-overflow-hidden !tw-flex tw-grow tw-basis-0 tw-relative">
         <slot name="bladeNavigation"></slot>
       </div>
 
@@ -68,7 +68,7 @@ export default defineComponent({
 import { useRouter } from "vue-router";
 import VcAppBar from "./_internal/vc-app-bar/vc-app-bar.vue";
 import VcAppMenu from "./_internal/vc-app-menu/vc-app-menu.vue";
-import { ExtendedComponent, IBladeElement, IMenuClickEvent, IOpenBlade } from "./../../../../shared";
+import { ExtendedComponent, IBladeRef, IMenuClickEvent, IOpenBlade } from "./../../../../shared";
 
 export interface Props {
   pages?: ExtendedComponent[];
@@ -80,7 +80,7 @@ export interface Props {
   logo?: string;
   version?: string;
   theme?: "light" | "dark";
-  bladesRefs?: IBladeElement[];
+  bladesRefs?: IBladeRef[];
   title?: string;
 }
 
@@ -88,15 +88,9 @@ export interface Emits {
   (event: "open", args: IOpenBlade): void;
   (event: "close", index: number): void;
   (event: "backlink:click", index: number): void;
+  (event: "logo:click"): void;
 }
 
-// defineSlots<{
-//   appSwitcher: unknown;
-//   bladeNavigation: unknown;
-//   notifications: unknown;
-//   passwordChange: unknown;
-// }>();
-
 withDefaults(defineProps<Props>(), {
   pages: () => [],
   menuItems: () => [],
@@ -112,8 +106,6 @@ console.debug("vc-app: Init vc-app");
 
 const instance = getCurrentInstance();
 
-const router = useRouter();
-
 const onMenuItemClick = function ({ item, navigationCb }: IMenuClickEvent) {
   console.debug(`vc-app#onMenuItemClick() called.`);
   if (item.clickHandler && typeof item.clickHandler === "function") {
@@ -131,17 +123,7 @@ const onToolbarButtonClick = function (item: Record<string, unknown>) {
   }
 };
 
-const openDashboard = async () => {
-  console.debug(`openDashboard() called.`);
-
-  // Close all opened pages with onBeforeClose callback
-  await emit("close", 0);
-
-  router.push("/");
-};
-
 defineExpose({
-  openDashboard,
   onToolbarButtonClick,
   onMenuItemClick,
 });