@vc-shell/framework 1.1.0-alpha.1 → 1.1.0-alpha.2

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

@@ -1,92 +1,92 @@
-<template>
-  <div class="vc-label">
-    <div class="vc-label__text">
-      <span class="vc-label__content">
-        <slot></slot>
-      </span>
-      <span
-        v-if="required"
-        class="vc-label__required"
-        >*</span
-      >
-    </div>
-    <span
-      v-if="$slots['tooltip']"
-      class="vc-label__tooltip"
-    >
-      <VcTooltip placement="top-start">
-        <VcIcon
-          class="vc-label__tooltip-icon"
-          :icon="tooltipIcon"
-          size="s"
-        ></VcIcon>
-        <template #tooltip>
-          <slot name="tooltip"></slot>
-        </template>
-      </VcTooltip>
-    </span>
-
-    <div
-      v-if="multilanguage"
-      class="vc-label__language"
-    >
-      {{ currentLanguage }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { VcIcon, VcTooltip } from "./../../../components";
-
-export interface Props {
-  required?: boolean;
-  tooltipIcon?: string;
-  multilanguage?: boolean;
-  currentLanguage?: string;
-}
-
-withDefaults(defineProps<Props>(), {
-  tooltipIcon: "fas fa-info-circle",
-});
-
-defineSlots<{
-  default: void;
-  tooltip?: void;
-}>();
-</script>
-
-<style lang="scss">
-:root {
-  --label-required-color: var(--danger-500);
-  --label-tooltip-color: var(--info-400);
-  --label-lang-color: var(--neutrals-500);
-}
-
-.vc-label {
-  @apply tw-flex tw-flex-row tw-justify-between tw-items-center tw-relative;
-
-  &__text {
-    @apply tw-flex-nowrap tw-font-bold tw-truncate;
-  }
-
-  &__content {
-    @apply tw-truncate tw-text-sm;
-  }
-
-  &__required {
-    @apply tw-text-[color:var(--label-required-color)] tw-ml-1;
-  }
-
-  &__tooltip {
-    @apply tw-grow-0 tw-basis-0 tw-ml-1 tw-relative tw-mr-auto;
-  }
-
-  &__tooltip-icon {
-    @apply tw-text-[color:var(--label-tooltip-color)];
-  }
-
-  &__language {
-    @apply tw-text-[color:var(--label-lang-color)] tw-shrink-0 tw-text-sm;
-  }
-}
-</style>
+<template>
+  <div class="vc-label">
+    <div class="vc-label__text">
+      <span class="vc-label__content">
+        <slot></slot>
+      </span>
+      <span
+        v-if="required"
+        class="vc-label__required"
+        >*</span
+      >
+    </div>
+    <span
+      v-if="$slots['tooltip']"
+      class="vc-label__tooltip"
+    >
+      <VcTooltip placement="top-start">
+        <VcIcon
+          class="vc-label__tooltip-icon"
+          :icon="tooltipIcon"
+          size="s"
+        ></VcIcon>
+        <template #tooltip>
+          <slot name="tooltip"></slot>
+        </template>
+      </VcTooltip>
+    </span>
+
+    <div
+      v-if="multilanguage"
+      class="vc-label__language"
+    >
+      {{ currentLanguage }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { VcIcon, VcTooltip } from "./../../../components";
+
+export interface Props {
+  required?: boolean;
+  tooltipIcon?: string;
+  multilanguage?: boolean;
+  currentLanguage?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  tooltipIcon: "fas fa-info-circle",
+});
+
+defineSlots<{
+  default: void;
+  tooltip?: void;
+}>();
+</script>
+
+<style lang="scss">
+:root {
+  --label-required-color: var(--danger-500);
+  --label-tooltip-color: var(--info-400);
+  --label-lang-color: var(--neutrals-500);
+}
+
+.vc-label {
+  @apply tw-flex tw-flex-row tw-justify-between tw-items-center tw-relative;
+
+  &__text {
+    @apply tw-flex-nowrap tw-font-bold tw-truncate;
+  }
+
+  &__content {
+    @apply tw-truncate tw-text-sm;
+  }
+
+  &__required {
+    @apply tw-text-[color:var(--label-required-color)] tw-ml-1;
+  }
+
+  &__tooltip {
+    @apply tw-grow-0 tw-basis-0 tw-ml-1 tw-relative tw-mr-auto;
+  }
+
+  &__tooltip-icon {
+    @apply tw-text-[color:var(--label-tooltip-color)];
+  }
+
+  &__language {
+    @apply tw-text-[color:var(--label-lang-color)] tw-shrink-0 tw-text-sm;
+  }
+}
+</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>',
+});