@vc-shell/framework 1.0.59 → 1.0.61

package/shared/modules/assets-manager/components/assets-manager/assets-manager.vue

@@ -5,7 +5,9 @@
     :closable="closable"
     :toolbarItems="bladeToolbar"
     @close="$emit('close:blade')"
-    width="50%"
+    width="70%"
+    @expand="$emit('expand:blade')"
+    @collapse="$emit('collapse:blade')"
   >
     <div
       class="tw-relative tw-h-full"
@@ -18,12 +20,12 @@
         :columns="columns"
         :expanded="expanded"
         stateKey="assets_manager"
-        :reorderableRows="true"
+        :reorderableRows="!readonly"
         :items="defaultAssets"
         :header="false"
         :footer="false"
-        :itemActionBuilder="actionBuilder"
-        multiselect
+        :itemActionBuilder="!readonly && actionBuilder"
+        :multiselect="!readonly"
         class="tw-h-full tw-w-full"
         @item-click="onItemClick"
         @row:reorder="sortAssets"
@@ -147,15 +149,16 @@ import { IBladeEvent, IParentCallArgs } from "./../../../../../shared";
 import moment from "moment";
 import Assets from "./../../../assets/components/assets-details/assets-details.vue";
 import { isImage, getFileThumbnail, readableSize } from "./../../../../utilities/assets";
+import * as _ from "lodash-es";
 
 export interface Props {
   expanded?: boolean;
   closable?: boolean;
   options: {
     assets: Asset[];
-    assetsEditHandler: (assets: Asset[]) => void;
-    assetsUploadHandler: (files: FileList) => void;
-    assetsRemoveHandler: (assets: Asset[]) => void;
+    assetsEditHandler: (assets: Asset[]) => Asset[];
+    assetsUploadHandler: (files: FileList) => Promise<Asset[]>;
+    assetsRemoveHandler: (assets: Asset[]) => Asset[];
     disabled: boolean;
   };
 }
@@ -182,6 +185,9 @@ const isDragging = ref(false);
 const uploader = ref();
 const loading = ref(false);
 const selectedItems = ref([]);
+const readonly = computed(() => props.options.disabled);
+let assetsCopy;
+const modified = ref(false);
 
 const bladeToolbar = ref<IBladeToolbar[]>([
   {
@@ -191,6 +197,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     clickHandler() {
       emit("close:blade");
     },
+    disabled: computed(() => !modified.value || readonly.value),
   },
   {
     id: "add",
@@ -199,6 +206,7 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     clickHandler() {
       toggleUploader();
     },
+    disabled: computed(() => readonly.value),
   },
   {
     id: "delete",
@@ -206,11 +214,10 @@ const bladeToolbar = ref<IBladeToolbar[]>([
     icon: "fas fa-trash",
     clickHandler() {
       if (props.options.assetsRemoveHandler && typeof props.options.assetsRemoveHandler === "function") {
-        props.options.assetsRemoveHandler(selectedItems.value);
-        defaultAssets.value = defaultAssets.value.filter((asset) => !selectedItems.value.includes(asset));
+        defaultAssets.value = props.options.assetsRemoveHandler(selectedItems.value);
       }
     },
-    disabled: computed(() => !selectedItems.value.length),
+    disabled: computed(() => !selectedItems.value.length || readonly.value),
   },
 ]);
 
@@ -248,35 +255,48 @@ const columns = ref<ITableColumns[]>([
   },
 ]);
 
+watch(
+  () => defaultAssets.value,
+  (newVal) => {
+    modified.value = !_.isEqual(newVal, assetsCopy);
+  },
+  { deep: true }
+);
+
 onMounted(() => {
   defaultAssets.value = props.options?.assets;
+  assetsCopy = _.cloneDeep(props.options?.assets);
 });
 
 function sortAssets(event: { dragIndex: number; dropIndex: number; value: Asset[] }) {
-  if (props.options.assetsEditHandler && typeof props.options.assetsEditHandler === "function") {
+  if (
+    props.options.assetsEditHandler &&
+    typeof props.options.assetsEditHandler === "function" &&
+    event.dragIndex !== event.dropIndex
+  ) {
     const sorted = event.value.map((item, index) => {
       item.sortOrder = index;
       return item;
     });
-    defaultAssets.value = sorted;
-    props.options.assetsEditHandler(sorted);
+
+    defaultAssets.value = props.options.assetsEditHandler(sorted);
   }
 }
 
 function dragOver() {
-  if (!props.options.disabled) {
+  if (!readonly.value) {
     isDragging.value = true;
   }
 }
 
 function dragLeave() {
-  if (!props.options.disabled) {
+  if (!readonly.value) {
     isDragging.value = false;
   }
 }
 
 async function onDrop(event: DragEvent) {
-  if (!props.options.disabled) {
+  if (!readonly.value) {
     const fileList = event.dataTransfer?.files;
 
     if (fileList && fileList.length) {
@@ -295,7 +315,7 @@ async function upload(files: FileList) {
   if (files && files.length) {
     try {
       loading.value = true;
-      await props.options.assetsUploadHandler(files);
+      defaultAssets.value = await props.options.assetsUploadHandler(files);
     } finally {
       loading.value = false;
     }
@@ -316,6 +336,7 @@ function onItemClick(item: Asset) {
     component: shallowRef(Assets),
     bladeOptions: {
       asset: unref(item),
+      disabled: readonly.value,
       assetEditHandler: (asset: Asset) => {
         const mutated = defaultAssets.value.map((x) => {
           if (x.id === asset.id || x.url === asset.url) {
@@ -325,12 +346,11 @@ function onItemClick(item: Asset) {
         });
 
         if (props.options.assetsEditHandler && typeof props.options.assetsEditHandler === "function") {
-          defaultAssets.value = mutated;
-          props.options.assetsEditHandler(mutated);
+          defaultAssets.value = props.options.assetsEditHandler(mutated);
         }
       },
       assetRemoveHandler: (asset: Asset) => {
-        props.options.assetsRemoveHandler([asset]);
+        defaultAssets.value = props.options.assetsRemoveHandler([asset]);
       },
     },
   });
@@ -357,8 +377,7 @@ const actionBuilder = (): IActionBuilderResult[] => {
     variant: "danger",
     leftActions: true,
     clickHandler(item: Asset) {
-      props.options.assetsRemoveHandler([item]);
-      defaultAssets.value = defaultAssets.value.filter((asset) => asset !== item);
+      defaultAssets.value = props.options.assetsRemoveHandler([item]);
       selectedItems.value = [];
     },
   });

package/shared/modules/assets-manager/components/index.ts

@@ -1 +1 @@
-export { AssetsManager } from "./assets-manager";
+export * from "./assets-manager";

package/shared/modules/assets-manager/index.ts

@@ -9,6 +9,6 @@ declare module "@vue/runtime-core" {
   }
 }
 
-export default createModule(components, locales);
+export const AssetsManagerModule = createModule(components, locales);
 
 export * from "./components";

package/tailwind.config.js

@@ -47,6 +47,4 @@ module.exports = {
             }
         },
     },
-
-  plugins: [require("@tailwindcss/line-clamp")],
 }

package/ui/components/atoms/vc-badge/vc-badge.stories.ts

@@ -1,27 +1,25 @@
-/**
- * Badge component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcBadge from "./vc-badge.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcBadge } from "./";
 
-export default {
-  title: "atoms/vc-badge",
+const meta: Meta<typeof VcBadge> = {
+  title: "atoms/VcBadge",
   component: VcBadge,
 };
 
-const Template: Story = (args) => ({
-  components: { VcBadge },
-  setup() {
-    return { args };
-  },
-  template: '<vc-badge v-bind="args">42</vc-badge>',
-});
+export default meta;
+type Story = StoryObj<typeof VcBadge>;
 
-export const Badge = Template.bind({});
-Badge.storyName = "vc-badge";
-Badge.args = {
-  active: false,
-  disabled: false,
-  clickable: true,
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcBadge },
+    setup() {
+      return { args };
+    },
+    template: '<vc-badge v-bind="args">42</vc-badge>',
+  }),
+  args: {
+    active: false,
+    disabled: false,
+    clickable: true,
+  },
 };

package/ui/components/atoms/vc-button/vc-button.stories.ts

@@ -1,34 +1,26 @@
-/**
- * Button component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcButton from "./vc-button.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcButton } from "./";
 
-export default {
-  title: "atoms/vc-button",
+const meta: Meta<typeof VcButton> = {
+  title: "atoms/VcButton",
   component: VcButton,
-  argTypes: {
-    variant: {
-      options: ["primary", "secondary", "special"],
-      control: { type: "radio" },
-    },
-  },
 };
 
-const Template: Story = (args) => ({
-  components: { VcButton },
-  setup() {
-    return { args };
-  },
-  template: '<vc-button v-bind="args">I am a button</vc-button>',
-});
+export default meta;
+type Story = StoryObj<typeof VcButton>;
 
-export const Button = Template.bind({});
-Button.storyName = "vc-button";
-Button.args = {
-  icon: "fas fa-star",
-  variant: "primary",
-  disabled: false,
-  small: false,
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcButton },
+    setup() {
+      return { args };
+    },
+    template: '<vc-button v-bind="args">I am a button</vc-button>',
+  }),
+  args: {
+    icon: "fas fa-star",
+    variant: "primary",
+    disabled: false,
+    small: false,
+  },
 };

package/ui/components/atoms/vc-button/vc-button.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-
+import { VcIcon } from "./../vc-icon";
 export interface Props {
   icon?: string | undefined;
   variant?: "primary" | "secondary" | "special" | "danger" | "widget" | "onlytext";
@@ -150,7 +150,6 @@ $variants: primary, secondary, special, danger, widget;
     tw-shadow-[1px_4px_10px_rgba(197,206,214,0.24)]
     tw-rounded-[4px]
     tw-p-[15px]
-    tw-border-[color:var(--button-widget-background-color)]
     hover:tw-bg-[color:var(--button-widget-background-color-hover)]
     focus:tw-bg-[color:var(--button-widget-background-color-active)]
     focus:tw-border-[color:var(--button-widget-border-color-active)]

package/ui/components/atoms/vc-card/vc-card.vue

@@ -40,6 +40,7 @@
 </template>
 
 <script lang="ts" setup>
+import { VcIcon } from "./../vc-icon";
 import { ref } from "vue";
 
 export interface Props {

package/ui/components/atoms/vc-checkbox/vc-checkbox.stories.ts

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

package/ui/components/atoms/vc-checkbox/vc-checkbox.vue

@@ -37,6 +37,7 @@
 </template>
 
 <script lang="ts" setup>
+import { VcHint } from "./../vc-hint";
 export interface Props {
   modelValue?: boolean;
   disabled?: boolean;

package/ui/components/atoms/vc-col/vc-col.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcCol } from "./";
+import { VcImage } from "./../../";
+
+const meta: Meta<typeof VcCol> = {
+  title: "atoms/VcCol",
+  component: VcCol,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcCol>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcCol, VcImage },
+    setup() {
+      return { args };
+    },
+    template:
+      '<vc-col v-bind="args"><vc-image src="https://placekitten.com/800/600" size="xl"/><vc-image src="https://placekitten.com/800/600" size="xl"/><vc-image src="https://placekitten.com/800/600" size="xl"/></vc-col>',
+  }),
+  args: {},
+};

package/ui/components/atoms/vc-container/vc-container.stories.ts

@@ -1,31 +1,29 @@
-/**
- * Container component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcContainer from "./vc-container.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcContainer } from "./";
 
-export default {
-  title: "atoms/vc-container",
+const meta: Meta<typeof VcContainer> = {
+  title: "atoms/VcContainer",
   component: VcContainer,
 };
 
-const Template: Story = (args) => ({
-  components: { VcContainer },
-  setup() {
-    return { args };
-  },
-  template: `<div style="width: 400px; height: 300px"><vc-container v-bind="args">
+export default meta;
+type Story = StoryObj<typeof VcContainer>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcContainer },
+    setup() {
+      return { args };
+    },
+    template: `<div style="width: 400px; height: 300px"><vc-container v-bind="args">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque tortor id lacus viverra, ut mollis libero auctor. Curabitur viverra, justo eu convallis pulvinar, dui nisi luctus quam, ut egestas tortor dolor quis nisi. Sed dignissim tellus ac enim dignissim dapibus. Duis vitae ipsum sit amet leo ornare fringilla sit amet a felis. Quisque finibus elementum dolor eu rhoncus. Donec dapibus non nisl blandit lobortis. Suspendisse pellentesque elit nunc, at auctor orci dignissim sed. Cras malesuada nibh id porttitor hendrerit.</p>
     <p>Maecenas ut malesuada risus, a euismod ligula. Mauris fringilla arcu a vestibulum varius. Phasellus et quam facilisis, egestas magna ut, ultrices est. Maecenas accumsan sit amet metus sit amet laoreet. Sed at accumsan orci, id tincidunt nibh. Nam laoreet eu nisl a condimentum. Fusce ac blandit justo. Vestibulum sollicitudin eros euismod, cursus arcu ac, blandit eros. Phasellus tempor mi et iaculis pulvinar. Cras blandit, tortor sit amet fermentum aliquet, metus ipsum ultricies est, eu congue dui nunc nec ligula.</p>
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque porttitor felis non turpis volutpat, ut consequat nulla vestibulum. Donec ipsum dui, convallis a faucibus eget, vehicula faucibus quam. Maecenas et velit odio. Suspendisse posuere faucibus est vel condimentum. Mauris et est placerat risus tincidunt rutrum. Sed venenatis nunc a mollis dignissim. Nam felis nisl, blandit in venenatis et, sollicitudin ut eros. Quisque ornare lacus metus, sed placerat lacus malesuada et. Sed venenatis, turpis in porta suscipit, libero ex tristique erat, nec pretium lectus justo malesuada dolor.</p>
     <p>Vivamus non nisi quis elit pellentesque pharetra quis eget augue. Donec tincidunt nunc id placerat tincidunt. Mauris ultrices quam id risus sodales, at euismod mauris convallis. Morbi quis aliquam nibh. Cras vitae mi a risus dapibus lacinia sit amet eu erat. Morbi ligula ex, aliquet ac nunc a, tempus lacinia lacus. Integer pretium arcu augue, vitae egestas libero rutrum eu.</p>
     <p>Suspendisse malesuada nisl tempor tellus ullamcorper, ut varius enim molestie. Suspendisse eleifend at libero id ultricies. Duis sagittis quis metus eget condimentum. Praesent iaculis viverra mauris et mattis. Pellentesque cursus, turpis sed venenatis volutpat, nibh tortor eleifend eros, non varius neque lectus ut dolor. Sed eget lectus et risus hendrerit molestie. Cras lorem enim, rutrum sed pellentesque in, tristique et diam. Donec aliquet dolor sit amet cursus facilisis. Donec a placerat nibh.</p>
   </vc-container></div>`,
-});
-
-export const Container = Template.bind({});
-Container.storyName = "vc-container";
-Container.args = {
-  shadow: false,
+  }),
+  args: {
+    shadow: false,
+  },
 };

package/ui/components/atoms/vc-container/vc-container.vue

@@ -36,6 +36,7 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, computed, nextTick } from "vue";
+import { VcIcon } from "./../vc-icon";
 
 export interface Props {
   shadow?: boolean;

package/ui/components/atoms/vc-hint/vc-hint.stories.ts

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

package/ui/components/atoms/vc-icon/vc-icon.stories.ts

@@ -1,32 +1,24 @@
-/**
- * Icon component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcIcon from "./vc-icon.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcIcon } from "./";
 
-export default {
-  title: "atoms/vc-icon",
+const meta: Meta<typeof VcIcon> = {
+  title: "atoms/VcIcon",
   component: VcIcon,
-  argTypes: {
-    size: {
-      options: ["xs", "s", "m", "l", "xl"],
-      control: { type: "radio" },
-    },
-  },
 };
 
-const Template: Story = (args) => ({
-  components: { VcIcon },
-  setup() {
-    return { args };
-  },
-  template: '<vc-icon v-bind="args"></vc-icon>',
-});
+export default meta;
+type Story = StoryObj<typeof VcIcon>;
 
-export const Icon = Template.bind({});
-Icon.storyName = "vc-icon";
-Icon.args = {
-  icon: "fas fa-star",
-  size: "m",
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcIcon },
+    setup() {
+      return { args };
+    },
+    template: '<vc-icon v-bind="args"></vc-icon>',
+  }),
+  args: {
+    icon: "fas fa-star",
+    size: "m",
+  },
 };

package/ui/components/atoms/vc-image/vc-image.stories.ts

@@ -1,12 +1,8 @@
-/**
- * Image component.
- * @author Iurii A Taranov <me@flanker72.ru>
- */
-import { Story } from "@storybook/vue3";
-import VcImage from "./vc-image.vue";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcImage } from "./";
 
-export default {
-  title: "atoms/vc-image",
+const meta: Meta<typeof VcImage> = {
+  title: "atoms/VcImage",
   component: VcImage,
   argTypes: {
     aspect: {
@@ -20,20 +16,22 @@ export default {
   },
 };
 
-const Template: Story = (args) => ({
-  components: { VcImage },
-  setup() {
-    return { args };
-  },
-  template: '<div style="width: 400px"><vc-image v-bind="args"></vc-image></div>',
-});
+export default meta;
+type Story = StoryObj<typeof VcImage>;
 
-export const Image = Template.bind({});
-Image.storyName = "vc-image";
-Image.args = {
-  aspect: "1x1",
-  rounded: false,
-  clickable: false,
-  src: "https://placekitten.com/800/600",
-  size: "auto",
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcImage },
+    setup() {
+      return { args };
+    },
+    template: '<div style="width: 400px"><vc-image v-bind="args"></vc-image></div>',
+  }),
+  args: {
+    aspect: "1x1",
+    rounded: false,
+    clickable: false,
+    src: "https://placekitten.com/800/600",
+    size: "auto",
+  },
 };

package/ui/components/atoms/vc-image/vc-image.vue

@@ -30,6 +30,7 @@
 </template>
 
 <script lang="ts" setup>
+import { VcIcon } from "./../vc-icon";
 import { computed } from "vue";
 
 export interface Props {
@@ -37,7 +38,7 @@ export interface Props {
   rounded?: boolean;
   bordered?: boolean;
   clickable?: boolean;
-  src: string;
+  src?: string;
   size?: "auto" | "1x1" | "16x9" | "4x3" | "3x2" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
   background?: "cover" | "contain" | "auto";
 }

package/ui/components/atoms/vc-info-row/vc-info-row.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { VcInfoRow } from "./";
+
+const meta: Meta<typeof VcInfoRow> = {
+  title: "atoms/VcInfoRow",
+  component: VcInfoRow,
+};
+
+export default meta;
+type Story = StoryObj<typeof VcInfoRow>;
+
+export const Primary: Story = {
+  render: (args) => ({
+    components: { VcInfoRow },
+    setup() {
+      return { args };
+    },
+    template: '<vc-info-row v-bind="args"></vc-info-row>',
+  }),
+  args: {
+    label: "Name",
+    value: "This is my name",
+    type: "default",
+  },
+};