@vc-shell/framework 1.0.341 → 1.1.0-alpha.10

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

@@ -1,5 +1,10 @@
 <template>
-  <div class="vc-label">
+  <div
+    class="vc-label"
+    :class="{
+      'vc-label_error': error,
+    }"
+  >
     <div class="vc-label__text">
       <span class="vc-label__content">
         <slot></slot>
@@ -43,6 +48,7 @@ export interface Props {
   tooltipIcon?: string;
   multilanguage?: boolean;
   currentLanguage?: string;
+  error?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
@@ -60,6 +66,7 @@ defineSlots<{
   --label-required-color: var(--danger-500);
   --label-tooltip-color: var(--info-400);
   --label-lang-color: var(--neutrals-500);
+  --label-error-color: var(--danger-500);
 }
 
 .vc-label {
@@ -88,5 +95,9 @@ defineSlots<{
   &__language {
     @apply tw-text-[color:var(--label-lang-color)] tw-shrink-0 tw-text-sm;
   }
+
+  &_error &__text {
+    @apply tw-text-[color:var(--label-error-color)];
+  }
 }
 </style>

package/ui/components/atoms/vc-link/index.ts

@@ -1,10 +1,10 @@
-import { VNode } from "vue";
-import _Link from "./vc-link.vue";
-
-export const VcLink = _Link as typeof _Link & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+import { VNode } from "vue";
+import _Link from "./vc-link.vue";
+
+export const VcLink = _Link as typeof _Link & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

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

@@ -1,37 +1,37 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcLink } from "./";
-
-export default {
-  title: "atoms/VcLink",
-  component: VcLink,
-  args: {
-    active: false,
-    disabled: false,
-    default: "This is a link",
-  },
-  argTypes: {
-    default: {
-      control: "text",
-      table: {
-        type: {
-          summary: "text",
-        },
-      },
-    },
-    onClick: {
-      table: {
-        type: {
-          summary: "function",
-        },
-      },
-    },
-  },
-} satisfies Meta<typeof VcLink>;
-
-export const Primary: StoryFn<typeof VcLink> = (args) => ({
-  components: { VcLink },
-  setup() {
-    return { args };
-  },
-  template: '<vc-link v-bind="args">{{args.default}}</vc-link>',
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcLink } from "./";
+
+export default {
+  title: "atoms/VcLink",
+  component: VcLink,
+  args: {
+    active: false,
+    disabled: false,
+    default: "This is a link",
+  },
+  argTypes: {
+    default: {
+      control: "text",
+      table: {
+        type: {
+          summary: "text",
+        },
+      },
+    },
+    onClick: {
+      table: {
+        type: {
+          summary: "function",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcLink>;
+
+export const Primary: StoryFn<typeof VcLink> = (args) => ({
+  components: { VcLink },
+  setup() {
+    return { args };
+  },
+  template: '<vc-link v-bind="args">{{args.default}}</vc-link>',
+});

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

@@ -1,54 +1,54 @@
-<template>
-  <div
-    class="vc-link"
-    :class="{
-      'vc-link--active': active,
-      'vc-link--disabled': disabled,
-    }"
-    @click="onClickFn"
-  >
-    <slot></slot>
-  </div>
-</template>
-
-<script lang="ts" setup>
-export interface Props {
-  active?: boolean;
-  disabled?: boolean;
-  onClick?: () => void;
-}
-
-export interface Emits {
-  (event: "click"): void;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<Emits>();
-
-function onClickFn(): void {
-  if (!props.disabled) {
-    emit("click");
-  }
-}
-</script>
-
-<style lang="scss">
-:root {
-  --link-text-color: var(--primary-500);
-  --link-text-color-hover: var(--primary-400);
-  --link-text-color-active: var(--primary-700);
-  --link-text-color-disabled: var(--neutrals-300);
-}
-
-.vc-link {
-  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline;
-
-  &--active {
-    @apply tw-text-[color:var(--link-text-color-active)] tw-no-underline hover:tw-text-[color:var(--link-text-color-active)] hover:tw-no-underline;
-  }
-
-  &--disabled {
-    @apply tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] tw-no-underline hover:tw-text-[color:var(--link-text-color-disabled)] hover:tw-no-underline;
-  }
-}
-</style>
+<template>
+  <div
+    class="vc-link"
+    :class="{
+      'vc-link--active': active,
+      'vc-link--disabled': disabled,
+    }"
+    @click="onClickFn"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+export interface Props {
+  active?: boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export interface Emits {
+  (event: "click"): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+function onClickFn(): void {
+  if (!props.disabled) {
+    emit("click");
+  }
+}
+</script>
+
+<style lang="scss">
+:root {
+  --link-text-color: var(--primary-500);
+  --link-text-color-hover: var(--primary-400);
+  --link-text-color-active: var(--primary-700);
+  --link-text-color-disabled: var(--neutrals-300);
+}
+
+.vc-link {
+  @apply tw-text-[color:var(--link-text-color)] tw-no-underline tw-cursor-pointer tw-transition tw-duration-200 tw-inline-block hover:tw-text-[color:var(--link-text-color-hover)] hover:tw-underline;
+
+  &--active {
+    @apply tw-text-[color:var(--link-text-color-active)] tw-no-underline hover:tw-text-[color:var(--link-text-color-active)] hover:tw-no-underline;
+  }
+
+  &--disabled {
+    @apply tw-cursor-not-allowed tw-text-[color:var(--link-text-color-disabled)] tw-no-underline hover:tw-text-[color:var(--link-text-color-disabled)] hover:tw-no-underline;
+  }
+}
+</style>

package/ui/components/atoms/vc-loading/index.ts

@@ -1,3 +1,3 @@
-import _Loading from "./vc-loading.vue";
-
-export const VcLoading = _Loading as typeof _Loading;
+import _Loading from "./vc-loading.vue";
+
+export const VcLoading = _Loading as typeof _Loading;

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

@@ -1,18 +1,18 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcLoading } from "./";
-
-export default {
-  title: "atoms/VcLoading",
-  component: VcLoading,
-  args: {
-    active: true,
-  },
-} satisfies Meta<typeof VcLoading>;
-
-export const Primary: StoryFn<typeof VcLoading> = (args) => ({
-  components: { VcLoading },
-  setup() {
-    return { args };
-  },
-  template: `<div class="tw-h-20"><vc-loading v-bind="args"></vc-loading></div>`,
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcLoading } from "./";
+
+export default {
+  title: "atoms/VcLoading",
+  component: VcLoading,
+  args: {
+    active: true,
+  },
+} satisfies Meta<typeof VcLoading>;
+
+export const Primary: StoryFn<typeof VcLoading> = (args) => ({
+  components: { VcLoading },
+  setup() {
+    return { args };
+  },
+  template: `<div class="tw-h-20"><vc-loading v-bind="args"></vc-loading></div>`,
+});

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

@@ -1,58 +1,58 @@
-<template>
-  <div
-    class="vc-loading-overlay"
-    :class="{
-      'vc-loading-overlay--active': active,
-    }"
-  >
-    <div class="vc-loading-overlay__content">
-      <span class="vc-loading-overlay__main-marker"></span>
-      <div class="vc-loading-overlay__markers">
-        <span
-          v-for="item in 3"
-          :key="`marker_${item}`"
-          class="vc-loading-overlay__marker"
-        ></span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-export interface Props {
-  active?: boolean;
-}
-
-defineProps<Props>();
-</script>
-
-<style lang="scss">
-:root {
-  --loading-marker-color: var(--primary-500);
-}
-
-.vc-loading-overlay {
-  @apply tw-absolute tw-items-center tw-justify-center tw-flex-col tw-z-[9998] tw-w-full tw-h-full tw-box-border tw-hidden;
-
-  &--active {
-    @apply tw-flex #{!important};
-    @apply tw-backdrop-blur-[3px];
-  }
-
-  &__content {
-    @apply tw-relative tw-w-36 tw-h-10 tw-z-[1];
-  }
-
-  &__main-marker {
-    @apply tw-absolute tw-w-4 tw-h-4 tw-top-3 tw-left-4 tw-bg-[color:var(--loading-marker-color)] tw-rounded-full tw-translate-x-0 tw-animate-loadingMarker;
-  }
-
-  &__markers {
-    @apply tw-translate-x-0 tw-mt-3 tw-ml-8 tw-animate-loadingMarkers;
-  }
-
-  &__marker {
-    @apply tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[color:var(--loading-marker-color)] tw-rounded-full tw-ml-4;
-  }
-}
-</style>
+<template>
+  <div
+    class="vc-loading-overlay"
+    :class="{
+      'vc-loading-overlay--active': active,
+    }"
+  >
+    <div class="vc-loading-overlay__content">
+      <span class="vc-loading-overlay__main-marker"></span>
+      <div class="vc-loading-overlay__markers">
+        <span
+          v-for="item in 3"
+          :key="`marker_${item}`"
+          class="vc-loading-overlay__marker"
+        ></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+export interface Props {
+  active?: boolean;
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss">
+:root {
+  --loading-marker-color: var(--primary-500);
+}
+
+.vc-loading-overlay {
+  @apply tw-absolute tw-items-center tw-justify-center tw-flex-col tw-z-[9998] tw-w-full tw-h-full tw-box-border tw-hidden;
+
+  &--active {
+    @apply tw-flex #{!important};
+    @apply tw-backdrop-blur-[3px];
+  }
+
+  &__content {
+    @apply tw-relative tw-w-36 tw-h-10 tw-z-[1];
+  }
+
+  &__main-marker {
+    @apply tw-absolute tw-w-4 tw-h-4 tw-top-3 tw-left-4 tw-bg-[color:var(--loading-marker-color)] tw-rounded-full tw-translate-x-0 tw-animate-loadingMarker;
+  }
+
+  &__markers {
+    @apply tw-translate-x-0 tw-mt-3 tw-ml-8 tw-animate-loadingMarkers;
+  }
+
+  &__marker {
+    @apply tw-block tw-float-left tw-w-4 tw-h-4 tw-bg-[color:var(--loading-marker-color)] tw-rounded-full tw-ml-4;
+  }
+}
+</style>

package/ui/components/atoms/vc-progress/index.ts

@@ -1,10 +1,10 @@
-import { VNode } from "vue";
-import _Progress from "./vc-progress.vue";
-
-export const VcProgress = _Progress as typeof _Progress & {
-  new (): {
-    $slots: {
-      default: () => VNode[];
-    };
-  };
-};
+import { VNode } from "vue";
+import _Progress from "./vc-progress.vue";
+
+export const VcProgress = _Progress as typeof _Progress & {
+  new (): {
+    $slots: {
+      default: () => VNode[];
+    };
+  };
+};

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

@@ -1,30 +1,30 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcProgress } from "./";
-
-export default {
-  title: "atoms/VcProgress",
-  component: VcProgress,
-  args: {
-    value: 30,
-    variant: "striped",
-  },
-  argTypes: {
-    variant: {
-      control: "radio",
-      options: ["default", "striped"],
-      table: {
-        type: {
-          summary: '["default", "striped"]',
-        },
-      },
-    },
-  },
-} satisfies Meta<typeof VcProgress>;
-
-export const Primary: StoryFn<typeof VcProgress> = (args) => ({
-  components: { VcProgress },
-  setup() {
-    return { args };
-  },
-  template: '<vc-progress v-bind="args"></vc-progress>',
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcProgress } from "./";
+
+export default {
+  title: "atoms/VcProgress",
+  component: VcProgress,
+  args: {
+    value: 30,
+    variant: "striped",
+  },
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: ["default", "striped"],
+      table: {
+        type: {
+          summary: '["default", "striped"]',
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcProgress>;
+
+export const Primary: StoryFn<typeof VcProgress> = (args) => ({
+  components: { VcProgress },
+  setup() {
+    return { args };
+  },
+  template: '<vc-progress v-bind="args"></vc-progress>',
+});

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

@@ -31,7 +31,7 @@ withDefaults(defineProps<Props>(), {
   --progressbar-background-color: var(--additional-50);
   --progressbar-foreground-color: var(--accent-200);
   --progressbar-border-width: 1px;
-  --progressbar-border-color: var(--base-border-color, var(--neutrals-200));
+  --progressbar-border-color: var(--neutrals-200);
   --progressbar-striped-bg: linear-gradient(
         45deg,
         transparent 50%,

package/ui/components/atoms/vc-row/index.ts

@@ -1 +1 @@
-export { default as VcRow } from "./vc-row.vue";
+export { default as VcRow } from "./vc-row.vue";

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

@@ -1,20 +1,20 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcRow } from "./";
-import { VcImage } from "./../../";
-
-export default {
-  title: "atoms/VcRow",
-  component: VcRow,
-} satisfies Meta<typeof VcRow>;
-
-export const Primary: StoryFn<typeof VcRow> = (args) => ({
-  components: { VcRow, VcImage },
-  setup() {
-    return { args };
-  },
-  template: `<vc-row v-bind="args">
-      <vc-image src="https://picsum.photos/200" size="xl" />
-      <vc-image src="https://picsum.photos/200" size="xl" />
-      <vc-image src="https://picsum.photos/200" size="xl" />
-    </vc-row>`,
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcRow } from "./";
+import { VcImage } from "./../../";
+
+export default {
+  title: "atoms/VcRow",
+  component: VcRow,
+} satisfies Meta<typeof VcRow>;
+
+export const Primary: StoryFn<typeof VcRow> = (args) => ({
+  components: { VcRow, VcImage },
+  setup() {
+    return { args };
+  },
+  template: `<vc-row v-bind="args">
+      <vc-image src="https://picsum.photos/200" size="xl" />
+      <vc-image src="https://picsum.photos/200" size="xl" />
+      <vc-image src="https://picsum.photos/200" size="xl" />
+    </vc-row>`,
+});

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

@@ -1,22 +1,22 @@
-<template>
-  <div class="vc-row">
-    <slot></slot>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineSlots<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  default: (props: any) => any;
-}>();
-</script>
-
-<style lang="scss">
-.vc-row {
-  @apply tw-flex tw-flex-nowrap tw-items-stretch;
-
-  .vc-app_mobile & {
-    @apply tw-grid;
-  }
-}
-</style>
+<template>
+  <div class="vc-row">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineSlots<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  default: (props: any) => any;
+}>();
+</script>
+
+<style lang="scss">
+.vc-row {
+  @apply tw-flex tw-flex-nowrap tw-items-stretch;
+
+  .vc-app_mobile & {
+    @apply tw-grid;
+  }
+}
+</style>

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

@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="vc-skeleton"
+    :class="{
+      'vc-skeleton--animated': animated,
+    }"
+  >
+    <div
+      v-for="index in rows"
+      :key="index"
+      class="vc-skeleton__row"
+      :style="{
+        width: getRowWidth(index),
+      }"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    rows?: number;
+    animated?: boolean;
+  }>(),
+  {
+    rows: 1,
+    animated: false,
+  }
+);
+
+function getRowWidth(index: number) {
+  if (index === props.rows) {
+    return '60%';
+  }
+  return '100%';
+}
+</script>
+
+<style lang="scss">
+.vc-skeleton {
+  @apply tw-w-full tw-flex tw-flex-col tw-gap-4;
+
+  &__row {
+    @apply tw-h-4 tw-bg-[--neutrals-200] tw-rounded;
+  }
+
+  &--animated &__row {
+    @apply tw-animate-pulse;
+  }
+}
+</style>

package/ui/components/atoms/vc-status/index.ts

@@ -1 +1 @@
-export { default as VcStatus } from "./vc-status.vue";
+export { default as VcStatus } from "./vc-status.vue";