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

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

@@ -1,68 +1,68 @@
-<template>
-  <div
-    class="vc-progress"
-    :class="{
-      'vc-progress--striped': variant === 'striped',
-    }"
-  >
-    <div
-      class="vc-progress__value"
-      :style="`width: ${value}%`"
-    ></div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-export interface Props {
-  value?: number;
-  variant?: "default" | "striped";
-}
-
-withDefaults(defineProps<Props>(), {
-  value: 0,
-  variant: "default",
-});
-</script>
-
-<style lang="scss">
-:root {
-  --progressbar-height: 16px;
-  --progressbar-border-radius: 2px;
-  --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-striped-bg: linear-gradient(
-        45deg,
-        transparent 50%,
-        var(--accent-200) 50%,
-        var(--accent-200) 75%,
-        transparent 75%
-      )
-      left/30px 30px repeat-x,
-    var(--accent-50);
-  --progressbar-striped-color: var(--accent-200);
-}
-
-@keyframes change {
-  from {
-    background-position: 0 0;
-  }
-  to {
-    background-position: 30px 0;
-  }
-}
-
-.vc-progress {
-  @apply tw-border-[length:var(--progressbar-border-width)] tw-border-[color:var(--progressbar-border-color)] tw-rounded-[var(--progressbar-border-radius)] tw-h-[var(--progressbar-height)] tw-transition tw-duration-200 tw-box-border tw-bg-[color:var(--progressbar-background-color)];
-
-  &__value {
-    @apply tw-bg-[color:var(--progressbar-foreground-color)] tw-transition tw-duration-200 tw-h-full;
-  }
-
-  &--striped .vc-progress__value {
-    background: var(--progressbar-striped-bg);
-    animation: change 1s linear infinite;
-  }
-}
-</style>
+<template>
+  <div
+    class="vc-progress"
+    :class="{
+      'vc-progress--striped': variant === 'striped',
+    }"
+  >
+    <div
+      class="vc-progress__value"
+      :style="`width: ${value}%`"
+    ></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+export interface Props {
+  value?: number;
+  variant?: "default" | "striped";
+}
+
+withDefaults(defineProps<Props>(), {
+  value: 0,
+  variant: "default",
+});
+</script>
+
+<style lang="scss">
+:root {
+  --progressbar-height: 16px;
+  --progressbar-border-radius: 2px;
+  --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-striped-bg: linear-gradient(
+        45deg,
+        transparent 50%,
+        var(--accent-200) 50%,
+        var(--accent-200) 75%,
+        transparent 75%
+      )
+      left/30px 30px repeat-x,
+    var(--accent-50);
+  --progressbar-striped-color: var(--accent-200);
+}
+
+@keyframes change {
+  from {
+    background-position: 0 0;
+  }
+  to {
+    background-position: 30px 0;
+  }
+}
+
+.vc-progress {
+  @apply tw-border-[length:var(--progressbar-border-width)] tw-border-[color:var(--progressbar-border-color)] tw-rounded-[var(--progressbar-border-radius)] tw-h-[var(--progressbar-height)] tw-transition tw-duration-200 tw-box-border tw-bg-[color:var(--progressbar-background-color)];
+
+  &__value {
+    @apply tw-bg-[color:var(--progressbar-foreground-color)] tw-transition tw-duration-200 tw-h-full;
+  }
+
+  &--striped .vc-progress__value {
+    background: var(--progressbar-striped-bg);
+    animation: change 1s linear infinite;
+  }
+}
+</style>

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";

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

@@ -1,85 +1,85 @@
-import type { Meta, StoryFn } from "@storybook/vue3";
-import { VcStatus } from "./";
-import { VcIcon } from "../vc-icon";
-
-const VARIANT = ["info", "warning", "danger", "success", "light-danger"];
-
-export default {
-  title: "atoms/VcStatus",
-  component: VcStatus,
-  args: {
-    variant: "info",
-    outline: true,
-    extend: false,
-  },
-  argTypes: {
-    variant: {
-      control: "radio",
-      options: VARIANT,
-      table: {
-        type: {
-          summary: VARIANT.join(", "),
-        },
-      },
-    },
-    outline: {
-      control: "boolean",
-      table: {
-        type: {
-          summary: "boolean",
-        },
-      },
-    },
-    extend: {
-      control: "boolean",
-      table: {
-        type: {
-          summary: "boolean",
-        },
-      },
-    },
-  },
-} satisfies Meta<typeof VcStatus>;
-
-export const Primary: StoryFn<typeof VcStatus> = (args) => ({
-  components: { VcStatus },
-  setup() {
-    return { args };
-  },
-  template: '<vc-status v-bind="args">Status text</vc-status>',
-});
-
-export const Extended: StoryFn<typeof VcStatus> = (args) => ({
-  components: { VcStatus, VcIcon },
-  setup() {
-    return { args };
-  },
-  template: `
-  <vc-status v-bind="args" extend variant="danger" >
-    <div class="tw-flex tw-flex-row tw-items-center">
-      <VcIcon icon="fas fa-warehouse" size="xl" variant="danger" class="tw-mr-3" />
-      <div>
-        <h3 class="tw-font-bold">Status</h3>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque tortor id lacus viverra, ut mollis libero auctor. </p>
-      </div>
-    </div>
-  </vc-status>`,
-});
-
-export const AllStates: StoryFn<typeof VcStatus> = (args) => ({
-  components: { VcStatus },
-  setup() {
-    return { args, variants: VARIANT };
-  },
-  template: `
-    <div class="tw-space-y-4">
-      <div v-for="variant in variants" :key="variant">
-        <h2 class="tw-font-bold">Color: {{variant}}</h2>
-        <div class="tw-space-x-4 tw-flex tw-flex-row">
-          <vc-status v-bind="{...args, variant}">Outline {{variant}}</vc-status>
-          <vc-status v-bind="{...args, variant}" :outline="false">{{variant}}</vc-status>
-        </div>
-      </div>
-    </div>
-  `,
-});
+import type { Meta, StoryFn } from "@storybook/vue3";
+import { VcStatus } from "./";
+import { VcIcon } from "../vc-icon";
+
+const VARIANT = ["info", "warning", "danger", "success", "light-danger"];
+
+export default {
+  title: "atoms/VcStatus",
+  component: VcStatus,
+  args: {
+    variant: "info",
+    outline: true,
+    extend: false,
+  },
+  argTypes: {
+    variant: {
+      control: "radio",
+      options: VARIANT,
+      table: {
+        type: {
+          summary: VARIANT.join(", "),
+        },
+      },
+    },
+    outline: {
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+    extend: {
+      control: "boolean",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+      },
+    },
+  },
+} satisfies Meta<typeof VcStatus>;
+
+export const Primary: StoryFn<typeof VcStatus> = (args) => ({
+  components: { VcStatus },
+  setup() {
+    return { args };
+  },
+  template: '<vc-status v-bind="args">Status text</vc-status>',
+});
+
+export const Extended: StoryFn<typeof VcStatus> = (args) => ({
+  components: { VcStatus, VcIcon },
+  setup() {
+    return { args };
+  },
+  template: `
+  <vc-status v-bind="args" extend variant="danger" >
+    <div class="tw-flex tw-flex-row tw-items-center">
+      <VcIcon icon="fas fa-warehouse" size="xl" variant="danger" class="tw-mr-3" />
+      <div>
+        <h3 class="tw-font-bold">Status</h3>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pellentesque tortor id lacus viverra, ut mollis libero auctor. </p>
+      </div>
+    </div>
+  </vc-status>`,
+});
+
+export const AllStates: StoryFn<typeof VcStatus> = (args) => ({
+  components: { VcStatus },
+  setup() {
+    return { args, variants: VARIANT };
+  },
+  template: `
+    <div class="tw-space-y-4">
+      <div v-for="variant in variants" :key="variant">
+        <h2 class="tw-font-bold">Color: {{variant}}</h2>
+        <div class="tw-space-x-4 tw-flex tw-flex-row">
+          <vc-status v-bind="{...args, variant}">Outline {{variant}}</vc-status>
+          <vc-status v-bind="{...args, variant}" :outline="false">{{variant}}</vc-status>
+        </div>
+      </div>
+    </div>
+  `,
+});

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

@@ -1,26 +1,35 @@
 <template>
   <div
     class="vc-status"
-    :class="[`vc-status_${variant}`, { 'vc-status_outline': outline }, { 'vc-status_extended': extend }]"
+    :class="[
+      `vc-status_${variant}`,
+      {
+        'vc-status_extended': extend,
+        'vc-status_dot': dot,
+      },
+    ]"
   >
-    <div
-      v-if="outline"
-      class="vc-status__dot"
-    ></div>
-    <slot></slot>
+    <div class="vc-status__content">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 export interface Props {
   variant?: "info" | "warning" | "danger" | "success" | "light-danger" | "info-dark" | "primary";
+  /**
+   * @deprecated
+   */
   outline?: boolean;
   extend?: boolean;
+  dot?: boolean;
 }
 
 withDefaults(defineProps<Props>(), {
   variant: "info",
-  outline: true,
+  outline: false,
+  dot: false,
 });
 
 defineSlots<{
@@ -33,67 +42,92 @@ defineSlots<{
 :root {
   --status-padding: 4px 14px;
   --status-padding-extended: 8px;
+  --status-dot-size: 10px;
 
   --status-border-radius: 20px;
   --status-border-radius-extended: 4px;
   --status-border-width: 1px;
 
   --status-border-color: var(--neutrals-500);
+  --status-bg-color: var(--additional-50);
 
   --status-info-color: var(--additional-950);
   --status-info-main-color: var(--info-500);
+  --status-info-bg-color: var(--info-50);
 
   --status-warning-color: var(--additional-950);
   --status-warning-main-color: var(--warning-500);
+  --status-warning-bg-color: var(--warning-50);
 
   --status-danger-color: var(--additional-950);
   --status-danger-main-color: var(--danger-500);
+  --status-danger-bg-color: var(--danger-50);
 
   --status-success-color: var(--additional-950);
   --status-success-main-color: var(--success-500);
+  --status-success-bg-color: var(--success-50);
 
   --status-light-danger-color: var(--additional-950);
   --status-light-danger-main-color: var(--danger-300);
+  --status-light-danger-bg-color: var(--danger-50);
 
   --status-info-dark-color: var(--additional-50);
   --status-info-dark-main-color: var(--info-600);
+  --status-info-dark-bg-color: var(--info-600);
 
   --status-primary-color: var(--additional-950);
   --status-primary-main-color: var(--primary-500);
-
-  --status-outline-bg-color: var(--additional-50);
+  --status-primary-bg-color: var(--primary-50);
 }
 
 $variants: info, warning, danger, success, light-danger, info-dark, primary;
 
 .vc-status {
   @apply tw-inline-block tw-font-normal tw-whitespace-nowrap tw-text-xs tw-truncate tw-text-center tw-border tw-border-solid tw-box-border;
+  @apply tw-py-1 tw-px-3 tw-rounded-[var(--status-border-radius)];
+  @apply tw-flex tw-items-center tw-justify-center tw-flex-row tw-relative;
+  @apply tw-border-[length:var(--status-border-width)] tw-bg-[color:var(--status-bg-color)] tw-border-[color:var(--status-border-color)];
 
-  @apply tw-py-1 tw-px-3.5 tw-rounded-[var(--status-border-radius)];
-
-  border-width: var(--status-border-width);
+  &.vc-status_dot {
+    @apply tw-p-0 tw-w-[var(--status-dot-size)] tw-h-[var(--status-dot-size)] tw-max-w-[var(--status-dot-size)] tw-rounded-full tw-border-0 #{!important};
+  }
 
   @each $variant in $variants {
     &.vc-status_#{$variant} {
-      @apply tw-border-[color:var(--status-#{$variant}-main-color)] tw-bg-[color:var(--status-#{$variant}-main-color)];
+      @apply tw-bg-[color:var(--status-bg-color)] tw-max-w-fit;
+      @apply tw-border-[color:var(--status-border-color)] #{!important};
 
-      &.vc-status_outline {
-        @apply tw-bg-[color:var(--status-outline-bg-color)];
-        @apply tw-flex tw-items-center tw-justify-center tw-flex-row tw-relative;
-        @apply tw-border-[color:var(--status-border-color)] #{!important};
+      &::before {
+        @apply tw-content-[''] tw-bg-[color:var(--status-#{$variant}-main-color)] tw-w-4 tw-h-4 tw-rounded-full tw-mr-2 tw-shrink-0;
+      }
 
+      &.vc-status_dot {
+        @apply tw-bg-[color:var(--status-#{$variant}-main-color)];
         &::before {
-          content: "";
-          @apply tw-bg-[color:var(--status-#{$variant}-main-color)] tw-w-4 tw-h-4 tw-rounded-full tw-mr-2 tw-shrink-0;
+          @apply tw-content-none;
+        }
+      }
+
+      &.vc-status_extended {
+        @apply tw-whitespace-normal tw-rounded-[var(--status-border-radius-extended)] tw-justify-start;
+        @apply tw-max-w-full tw-p-[var(--status-padding-extended)] tw-bg-[color:var(--status-#{$variant}-bg-color)] tw-border-none;
+
+        &::before {
+          @apply tw-content-none;
+        }
+
+        .vc-status__content {
+          @apply tw-whitespace-normal tw-text-[color:var(--status-#{$variant}-color)] #{!important};
         }
       }
     }
   }
 
-  &.vc-status_extended {
-    @apply tw-whitespace-normal tw-rounded-[var(--status-border-radius-extended)];
-
-    padding: var(--status-padding-extended);
+  &__content {
+    @apply tw-truncate;
+    .vc-status_dot & {
+      @apply tw-hidden;
+    }
   }
 }
 </style>

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

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

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

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

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

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

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

@@ -39,10 +39,10 @@ export interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  placement: "bottom-end",
+  placement: "bottom",
   offset: () => ({
-    crossAxis: 5,
-    mainAxis: 5,
+    crossAxis: 0,
+    mainAxis: 0,
   }),
   delay: 0,
 });
@@ -100,7 +100,7 @@ const hideTooltip = () => {
   }
 
   &__content {
-    @apply tw-absolute tw-z-[1001] tw-bg-[color:var(--tooltip-background-color)] tw-border tw-border-solid tw-border-[color:var(--tooltip-border-color)] tw-shadow-lg tw-rounded tw-text-[color:var(--tooltip-text-color)] tw-font-normal tw-py-1 tw-px-2;
+    @apply tw-absolute tw-z-[1002] tw-bg-[color:var(--tooltip-background-color)] tw-border tw-border-solid tw-border-[color:var(--tooltip-border-color)] tw-shadow-lg tw-rounded tw-text-[color:var(--tooltip-text-color)] tw-font-normal tw-py-1 tw-px-2;
   }
 }
 </style>

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

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