@vc-shell/framework 1.2.4-beta.7 → 2.0.0-alpha.0

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

@@ -1,363 +0,0 @@
-import { ref } from "vue";
-import { Meta, StoryObj } from "@storybook/vue3-vite";
-import VcRating from "@ui/components/molecules/vc-rating/vc-rating.vue";
-
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
-const meta: Meta<typeof VcRating> = {
-  title: "Molecules/VcRating",
-  component: VcRating,
-  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-  tags: ["autodocs"],
-  args: {
-    modelValue: 4,
-    max: 5,
-    variant: "stars",
-  },
-  argTypes: {
-    modelValue: {
-      description: "Current rating value",
-      control: { type: "number" },
-      table: {
-        category: "State",
-        type: { summary: "number" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    max: {
-      description: "Maximum rating value",
-      control: { type: "number" },
-      table: {
-        category: "Props",
-        type: { summary: "number" },
-        defaultValue: { summary: "5" },
-      },
-    },
-    variant: {
-      description: "Rating display variant",
-      control: { type: "select" },
-      options: ["stars", "star-and-text", "text"],
-      table: {
-        category: "Props",
-        type: { summary: "string" },
-        defaultValue: { summary: "stars" },
-      },
-    },
-    label: {
-      description: "Label for the rating component",
-      control: { type: "text" },
-      table: {
-        category: "Props",
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-    placeholder: {
-      description: "Placeholder text when no rating is available",
-      control: { type: "text" },
-      table: {
-        category: "Props",
-        type: { summary: "string" },
-        defaultValue: { summary: "No rating" },
-      },
-    },
-    tooltip: {
-      description: "Additional tooltip information",
-      control: { type: "text" },
-      table: {
-        category: "Props",
-        type: { summary: "string" },
-        defaultValue: { summary: "undefined" },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-The VcRating component displays a rating visualization with different display variants:
-- Stars: Displays rating as stars
-- Star and Text: Displays rating as stars with text representation
-- Text Only: Displays rating as text
-
-The component supports v-model binding for the rating value, maximum rating limit,
-and various display options like label, tooltip, and placeholder for no rating.
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof VcRating>;
-
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-export const Stars: Story = {
-  args: {
-    modelValue: 4,
-    max: 5,
-    variant: "stars",
-    label: "Rating",
-  },
-  render: (args) => ({
-    components: { VcRating },
-    setup() {
-      const rating = ref(args.modelValue);
-      return { args, rating };
-    },
-    template: `
-      <div style="max-width: 300px;">
-        <VcRating
-          v-model="rating"
-          :max="args.max"
-          :variant="args.variant"
-          :label="args.label"
-          :tooltip="args.tooltip"
-          :placeholder="args.placeholder"
-        />
-        <p>Current rating: {{ rating }}</p>
-      </div>
-    `,
-  }),
-};
-
-export const StarAndText: Story = {
-  args: {
-    modelValue: 3,
-    max: 5,
-    variant: "star-and-text",
-    label: "Product Rating",
-  },
-  render: (args) => ({
-    components: { VcRating },
-    setup() {
-      const rating = ref(args.modelValue);
-      return { args, rating };
-    },
-    template: `
-      <div style="max-width: 300px;">
-        <VcRating
-          v-model="rating"
-          :max="args.max"
-          :variant="args.variant"
-          :label="args.label"
-          :tooltip="args.tooltip"
-          :placeholder="args.placeholder"
-        />
-      </div>
-    `,
-  }),
-};
-
-export const TextOnly: Story = {
-  args: {
-    modelValue: 5,
-    max: 5,
-    variant: "text",
-    label: "Text Rating",
-  },
-  render: (args) => ({
-    components: { VcRating },
-    setup() {
-      const rating = ref(args.modelValue);
-      return { args, rating };
-    },
-    template: `
-      <div style="max-width: 300px;">
-        <VcRating
-          v-model="rating"
-          :max="args.max"
-          :variant="args.variant"
-          :label="args.label"
-          :tooltip="args.tooltip"
-          :placeholder="args.placeholder"
-        />
-      </div>
-    `,
-  }),
-};
-
-export const WithTooltip: Story = {
-  args: {
-    modelValue: 4,
-    max: 5,
-    variant: "stars",
-    label: "Rating with Tooltip",
-    tooltip: "This shows the product's average customer rating",
-  },
-  render: (args) => ({
-    components: { VcRating },
-    setup() {
-      const rating = ref(args.modelValue);
-      return { args, rating };
-    },
-    template: `
-      <div style="max-width: 300px;">
-        <VcRating
-          v-model="rating"
-          :max="args.max"
-          :variant="args.variant"
-          :label="args.label"
-          :tooltip="args.tooltip"
-          :placeholder="args.placeholder"
-        />
-      </div>
-    `,
-  }),
-};
-
-export const NoRating: Story = {
-  args: {
-    modelValue: 0,
-    max: 5,
-    variant: "stars",
-    label: "No Rating",
-    placeholder: "Not rated yet",
-  },
-  render: (args) => ({
-    components: { VcRating },
-    setup() {
-      const rating = ref(args.modelValue);
-      return { args, rating };
-    },
-    template: `
-      <div style="max-width: 300px;">
-        <VcRating
-          v-model="rating"
-          :max="args.max"
-          :variant="args.variant"
-          :label="args.label"
-          :tooltip="args.tooltip"
-          :placeholder="args.placeholder"
-        />
-      </div>
-    `,
-  }),
-};
-
-export const CustomMax: Story = {
-  args: {
-    modelValue: 8,
-    max: 10,
-    variant: "star-and-text",
-    label: "10-Star Rating",
-  },
-  render: (args) => ({
-    components: { VcRating },
-    setup() {
-      const rating = ref(args.modelValue);
-      return { args, rating };
-    },
-    template: `
-      <div style="max-width: 300px;">
-        <VcRating
-          v-model="rating"
-          :max="args.max"
-          :variant="args.variant"
-          :label="args.label"
-          :tooltip="args.tooltip"
-          :placeholder="args.placeholder"
-        />
-      </div>
-    `,
-  }),
-};
-
-export const WithDetailsSlot: Story = {
-  args: {
-    modelValue: 4,
-    max: 5,
-    variant: "stars",
-    label: "Rating with Details",
-  },
-  render: (args) => ({
-    components: { VcRating },
-    setup() {
-      const rating = ref(args.modelValue);
-      return { args, rating };
-    },
-    template: `
-      <div style="max-width: 300px;">
-        <VcRating
-          v-model="rating"
-          :max="args.max"
-          :variant="args.variant"
-          :label="args.label"
-          :tooltip="args.tooltip"
-          :placeholder="args.placeholder"
-        >
-          <template #details>
-            <div style="margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px;">
-              <p>Based on 128 customer reviews</p>
-              <div style="display: flex; justify-content: space-between;">
-                <span>5 stars</span>
-                <span>75%</span>
-              </div>
-              <div style="display: flex; justify-content: space-between;">
-                <span>4 stars</span>
-                <span>15%</span>
-              </div>
-              <div style="display: flex; justify-content: space-between;">
-                <span>3 stars</span>
-                <span>5%</span>
-              </div>
-              <div style="display: flex; justify-content: space-between;">
-                <span>2 stars</span>
-                <span>3%</span>
-              </div>
-              <div style="display: flex; justify-content: space-between;">
-                <span>1 star</span>
-                <span>2%</span>
-              </div>
-            </div>
-          </template>
-        </VcRating>
-      </div>
-    `,
-  }),
-};
-
-export const ComparisonTable: Story = {
-  render: () => ({
-    components: { VcRating },
-    setup() {
-      return {};
-    },
-    template: `
-      <div style="max-width: 600px;">
-        <h3 style="margin-bottom: 16px; font-weight: 600;">Rating Variant Comparison</h3>
-        <table style="width: 100%; border-collapse: collapse;">
-          <thead>
-            <tr>
-              <th style="text-align: left; padding: 8px; border-bottom: 1px solid #e2e8f0;">Variant</th>
-              <th style="text-align: left; padding: 8px; border-bottom: 1px solid #e2e8f0;">Example</th>
-              <th style="text-align: left; padding: 8px; border-bottom: 1px solid #e2e8f0;">Use Case</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td style="padding: 8px; border-bottom: 1px solid #e2e8f0;">stars</td>
-              <td style="padding: 8px; border-bottom: 1px solid #e2e8f0;">
-                <VcRating :modelValue="4" variant="stars" />
-              </td>
-              <td style="padding: 8px; border-bottom: 1px solid #e2e8f0;">Visual representation for quick scanning</td>
-            </tr>
-            <tr>
-              <td style="padding: 8px; border-bottom: 1px solid #e2e8f0;">star-and-text</td>
-              <td style="padding: 8px; border-bottom: 1px solid #e2e8f0;">
-                <VcRating :modelValue="4" variant="star-and-text" />
-              </td>
-              <td style="padding: 8px; border-bottom: 1px solid #e2e8f0;">Combined visual and textual representation</td>
-            </tr>
-            <tr>
-              <td style="padding: 8px; border-bottom: 1px solid #e2e8f0;">text</td>
-              <td style="padding: 8px; border-bottom: 1px solid #e2e8f0;">
-                <VcRating :modelValue="4" variant="text" />
-              </td>
-              <td style="padding: 8px; border-bottom: 1px solid #e2e8f0;">Simple text representation for minimal interfaces</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    `,
-  }),
-};

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

@@ -1,128 +0,0 @@
-<template>
-  <div class="vc-rating">
-    <!-- Rating label -->
-    <VcLabel
-      v-if="label"
-      class="vc-rating__label"
-    >
-      <span>{{ label }}</span>
-      <template
-        v-if="tooltip"
-        #tooltip
-      >
-        <span>{{ tooltip }}</span>
-      </template>
-    </VcLabel>
-
-    <!-- Rating display -->
-    <div
-      class="vc-rating__content"
-      role="img"
-      :aria-label="modelValue ? `Rating: ${modelValue} out of ${max}` : placeholder || 'No rating'"
-    >
-      <template v-if="modelValue">
-        <template v-if="variant === 'stars'">
-          <div class="vc-rating__stars">
-            <VcIcon
-              v-for="index in modelValue"
-              :key="index"
-              icon="lucide-star"
-              class="vc-rating__icon"
-            ></VcIcon>
-            <VcIcon
-              v-for="index in max - modelValue"
-              :key="index"
-              icon="lucide-star"
-              class="vc-rating__icon vc-rating__icon--empty"
-            ></VcIcon>
-          </div>
-        </template>
-        <template v-else>
-          <div class="vc-rating__text-container">
-            <VcIcon
-              v-if="variant === 'star-and-text'"
-              icon="lucide-star"
-              class="vc-rating__icon"
-            ></VcIcon>
-            <span class="vc-rating__rating">{{ modelValue }}/{{ max }}</span>
-            <slot name="details"></slot>
-          </div>
-        </template>
-      </template>
-      <template v-else>
-        <span class="vc-rating__placeholder">{{ placeholder }}</span>
-      </template>
-    </div>
-  </div>
-</template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import { VNode } from "vue";
-import { VcLabel } from "@ui/components/atoms/vc-label";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-
-export interface Props {
-  label?: string;
-  placeholder?: string;
-  tooltip?: string;
-  modelValue: number;
-  max?: number;
-  variant?: "stars" | "star-and-text" | "text";
-}
-
-withDefaults(defineProps<Props>(), { max: 5, variant: "stars" });
-
-defineSlots<{
-  details: (props: any) => VNode[];
-}>();
-</script>
-
-<style lang="scss">
-:root {
-  --rating-placeholder-color: var(--neutrals-400);
-  --rating-star-size: 1em;
-  --rating-gap: 2px;
-
-  --rating-special-color: var(--warning-500);
-  --rating-special-color-hover: var(--warning-600);
-  --rating-special-color-disabled: var(--warning-200);
-}
-
-.vc-rating {
-  @apply tw-flex tw-flex-col tw-align-middle;
-
-  &__content {
-    @apply tw-flex tw-flex-row tw-items-center;
-  }
-
-  &__stars {
-    @apply tw-flex tw-flex-row tw-items-center;
-    gap: var(--rating-gap);
-  }
-
-  &__text-container {
-    @apply tw-flex tw-flex-row tw-items-center;
-  }
-
-  &__placeholder {
-    @apply tw-text-[color:var(--rating-placeholder-color)];
-  }
-
-  &__icon {
-    @apply tw-text-[color:var(--rating-special-color)];
-    font-size: var(--rating-star-size);
-
-    &--empty {
-      @apply tw-opacity-40;
-    }
-  }
-
-  &__rating {
-    @apply tw-mr-1;
-  }
-
-  &__label {
-    @apply tw-mb-1;
-  }
-}
-</style>

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

@@ -1,200 +0,0 @@
-<template>
-  <teleport :to="teleportTarget">
-    <Transition name="select-dropdown">
-      <div
-        v-if="isOpened"
-        ref="dropdownElRef"
-        v-on-click-outside="[() => emit('clickOutside'), { ignore: [dropdownToggleRef] }]"
-        :id="listboxId"
-        data-test-id="dropdown"
-        class="vc-select__dropdown"
-        role="listbox"
-        :aria-label="ariaLabel"
-        :style="dropdownStyle"
-        @wheel="onDropdownWheel"
-      >
-        <input
-          v-if="searchable"
-          ref="searchInputRef"
-          class="vc-select__search-input"
-          tabindex="0"
-          aria-label="Search options"
-          autocomplete="off"
-          @input="emit('input', $event)"
-          @keydown.space.stop
-          @keydown.enter.stop
-        />
-
-        <VcScrollableContainer
-          ref="scrollContainerRef"
-          class="vc-select__scroll-container"
-        >
-          <!-- Render existing options -->
-          <div
-            v-for="(item, i) in optionScope"
-            :key="i"
-            class="vc-select__option"
-            data-test-id="option"
-            role="option"
-            :aria-selected="item.selected"
-            :class="{ 'vc-select__option--selected': item.selected }"
-            tabindex="0"
-            :data-index="i"
-            @click="item.toggleOption(item.opt)"
-            @keydown.enter="item.toggleOption(item.opt)"
-            @keydown.space="item.toggleOption(item.opt)"
-          >
-            <slot
-              name="option"
-              v-bind="item"
-            >{{ item.label }}</slot>
-            <span
-              v-if="item.selected"
-              class="vc-select__check-icon"
-            >
-              <VcIcon
-                icon="lucide-check"
-                size="xs"
-              />
-            </span>
-          </div>
-
-          <!-- Loading Indicator (Initial or More) -->
-          <div
-            v-if="listLoading"
-            class="vc-select__list-loading-indicator"
-          >
-            <VcIcon
-              icon="lucide-loader-2"
-              class="tw-animate-spin"
-              size="m"
-            />
-            <span>
-              {{
-                optionsListLength > 0
-                  ? t("COMPONENTS.MOLECULES.VC_SELECT.LOADING_MORE")
-                  : t("COMPONENTS.MOLECULES.VC_SELECT.LOADING")
-              }}
-            </span>
-          </div>
-
-          <!-- Show "No options" message -->
-          <div
-            v-if="!listLoading && !optionsListLength"
-            class="vc-select__no-options"
-          >
-            <slot name="no-options">
-              <span class="vc-select__no-options-text">{{ t("COMPONENTS.MOLECULES.VC_SELECT.NO_OPTIONS") }}</span>
-            </slot>
-          </div>
-
-          <!-- Intersection observer target for loading more -->
-          <span
-            v-if="hasNextPage && !listLoading"
-            ref="loadMoreRef"
-            class="vc-select__load-more-trigger"
-          ></span>
-        </VcScrollableContainer>
-      </div>
-    </Transition>
-  </teleport>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed, watch, nextTick } from "vue";
-import { vOnClickOutside } from "@vueuse/components";
-import { VcIcon } from "@ui/components/atoms/vc-icon";
-import { VcScrollableContainer } from "@ui/components/atoms/vc-scrollable-container";
-import { useI18n } from "vue-i18n";
-import { useTeleportTarget } from "@ui/composables";
-
-const props = defineProps<{
-  isOpened: boolean;
-  listboxId: string;
-  ariaLabel: string;
-  dropdownStyle: Record<string, string | undefined>;
-  searchable?: boolean;
-  optionScope: {
-    index: number;
-    opt: any;
-    selected: boolean;
-    label: any;
-    toggleOption: (opt: any) => void;
-  }[];
-  listLoading: boolean;
-  optionsListLength: number;
-  hasNextPage: boolean;
-  dropdownToggleRef: HTMLElement | null;
-}>();
-
-const emit = defineEmits<{
-  input: [event: Event];
-  clickOutside: [];
-}>();
-
-defineSlots<{
-  option: (scope: {
-    index: number;
-    opt: any;
-    selected: boolean;
-    label: any;
-    toggleOption: (opt: any) => void;
-  }) => any;
-  "no-options": (props: any) => any;
-}>();
-
-const { t } = useI18n({ useScope: "global" });
-const { teleportTarget } = useTeleportTarget();
-
-const dropdownElRef = ref<HTMLElement | null>(null);
-const searchInputRef = ref<HTMLInputElement | null>(null);
-const scrollContainerRef = ref<InstanceType<typeof VcScrollableContainer> | null>(null);
-const loadMoreRef = ref<HTMLElement | null>(null);
-
-const viewportRef = computed<HTMLElement | null>(() => scrollContainerRef.value?.viewportRef ?? null);
-
-function onDropdownWheel(event: WheelEvent) {
-  const el = viewportRef.value;
-  if (!el) return;
-
-  const isInViewport = el.contains(event.target as Node);
-
-  if (isInViewport) {
-    const atTop = el.scrollTop <= 0 && event.deltaY < 0;
-    const atBottom =
-      Math.ceil(el.scrollTop) >= el.scrollHeight - el.clientHeight && event.deltaY > 0;
-    if (atTop || atBottom) {
-      event.preventDefault();
-    }
-  } else {
-    event.preventDefault();
-    el.scrollTop += event.deltaY;
-  }
-  scrollContainerRef.value?.updateScrollState();
-}
-
-watch(
-  () => props.isOpened,
-  (opened) => {
-    if (opened) {
-      nextTick(() => scrollContainerRef.value?.updateScrollState());
-    }
-  },
-);
-
-watch(
-  () => props.optionScope.length,
-  () => {
-    if (props.isOpened) {
-      nextTick(() => scrollContainerRef.value?.updateScrollState());
-    }
-  },
-);
-
-defineExpose({
-  dropdownElRef,
-  searchInputRef,
-  viewportRef,
-  loadMoreRef,
-});
-</script>