@vc-shell/framework 1.2.4-beta.8 → 2.0.0-alpha.1

package/shared/components/common/popup/vc-popup-base.vue

@@ -1,133 +0,0 @@
-<template>
-  <VcPopup
-    :variant="variant"
-    :is-mobile-fullscreen="isMobileFullscreen"
-    :title="title"
-    :closable="closable"
-    @close="$emit('close')"
-  >
-    <template
-      v-if="$slots.header"
-      #header
-    >
-      <slot name="header" />
-    </template>
-
-    <template #content>
-      <slot />
-    </template>
-
-    <template #footer="{ close }">
-      <slot
-        name="footer"
-        :close="close"
-        :confirm="() => handleConfirm(close)"
-      >
-        <div
-          class="vc-popup-base__actions"
-          :class="{
-            'vc-popup-base__actions--confirm': mode === 'confirm',
-            'vc-popup-base__actions--single': mode === 'acknowledge',
-          }"
-        >
-          <template v-if="mode === 'confirm'">
-            <VcButton
-              :text="confirmAsText"
-              class="vc-popup-base__confirm"
-              @click="handleConfirm(close)"
-            >
-              {{ confirmLabel }}
-            </VcButton>
-            <VcButton @click="close">{{ cancelLabel }}</VcButton>
-          </template>
-          <VcButton
-            v-else
-            class="vc-popup-base__single"
-            @click="close"
-          >
-            {{ actionLabel }}
-          </VcButton>
-        </div>
-      </slot>
-    </template>
-  </VcPopup>
-</template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import VcPopup, { type PopupVariant } from "@ui/components/organisms/vc-popup/vc-popup.vue";
-
-export interface Props {
-  title?: string;
-  variant?: PopupVariant;
-  mode?: "acknowledge" | "confirm";
-  actionLabel?: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  confirmAsText?: boolean;
-  closable?: boolean;
-  isMobileFullscreen?: boolean;
-  closeOnConfirm?: boolean;
-}
-
-export interface Emits {
-  (event: "close"): void;
-  (event: "confirm"): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  variant: "default",
-  mode: "acknowledge",
-  actionLabel: "",
-  confirmLabel: "",
-  cancelLabel: "",
-  confirmAsText: false,
-  closable: true,
-  isMobileFullscreen: true,
-  closeOnConfirm: false,
-});
-
-const emit = defineEmits<Emits>();
-
-defineSlots<{
-  header: (props: any) => any;
-  default: (props: any) => any;
-  footer: (props: { close: () => void; confirm: () => void }) => any;
-}>();
-
-function handleConfirm(close: () => void): void {
-  emit("confirm");
-
-  if (props.closeOnConfirm) {
-    close();
-  }
-}
-</script>
-
-<style lang="scss">
-:root {
-  // Deprecated alias: --confirm-button-color
-  --popup-base-confirm-color: var(--confirm-button-color, var(--secondary-700));
-}
-
-.vc-popup-base {
-  &__actions {
-    @apply tw-flex tw-flex-auto tw-justify-end;
-
-    &--confirm {
-      @apply tw-gap-6;
-    }
-
-    &--single {
-      @apply tw-gap-0;
-    }
-  }
-
-  &__single {
-    @apply tw-ml-auto;
-  }
-
-  &__confirm {
-    color: var(--popup-base-confirm-color) !important;
-  }
-}
-</style>

package/shared/components/common/popup/vc-popup-error.vue

@@ -1,38 +0,0 @@
-<template>
-  <VcPopupBase
-    variant="error"
-    mode="acknowledge"
-    :action-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.OK')"
-    :title="title"
-    @close="$emit('close')"
-  >
-    <template
-      v-if="$slots.header"
-      #header
-    >
-      <slot name="header" />
-    </template>
-    <slot />
-  </VcPopupBase>
-</template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import VcPopupBase from "@shared/components/common/popup/vc-popup-base.vue";
-
-export interface Props {
-  title?: string;
-}
-
-export interface Emits {
-  (event: "close"): void;
-}
-
-defineProps<Props>();
-
-defineEmits<Emits>();
-
-defineSlots<{
-  header: (props: any) => any;
-  default: (props: any) => any;
-}>();
-</script>

package/shared/components/common/popup/vc-popup-info.vue

@@ -1,38 +0,0 @@
-<template>
-  <VcPopupBase
-    variant="info"
-    mode="acknowledge"
-    :action-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.OK')"
-    :title="title"
-    @close="$emit('close')"
-  >
-    <template
-      v-if="$slots.header"
-      #header
-    >
-      <slot name="header" />
-    </template>
-    <slot />
-  </VcPopupBase>
-</template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import VcPopupBase from "@shared/components/common/popup/vc-popup-base.vue";
-
-export interface Props {
-  title?: string;
-}
-
-export interface Emits {
-  (event: "close"): void;
-}
-
-defineProps<Props>();
-
-defineEmits<Emits>();
-
-defineSlots<{
-  header: (props: any) => any;
-  default: (props: any) => any;
-}>();
-</script>

package/shared/components/common/popup/vc-popup-warning.vue

@@ -1,42 +0,0 @@
-<template>
-  <VcPopupBase
-    variant="warning"
-    mode="confirm"
-    :confirm-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.CONFIRM')"
-    :cancel-label="$t('COMPONENTS.ORGANISMS.VC_POPUP.CANCEL')"
-    confirm-as-text
-    :title="title"
-    @close="$emit('close')"
-    @confirm="$emit('confirm')"
-  >
-    <template
-      v-if="$slots.header"
-      #header
-    >
-      <slot name="header" />
-    </template>
-    <slot />
-  </VcPopupBase>
-</template>
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<script lang="ts" setup>
-import VcPopupBase from "@shared/components/common/popup/vc-popup-base.vue";
-
-export interface Props {
-  title?: string;
-}
-
-export interface Emits {
-  (event: "close"): void;
-  (event: "confirm"): void;
-}
-
-defineProps<Props>();
-
-defineEmits<Emits>();
-
-defineSlots<{
-  header: (props: any) => any;
-  default: (props: any) => any;
-}>();
-</script>

package/shared/components/dashboard-charts/ChartContainer.vue

@@ -1,54 +0,0 @@
-<!-- eslint-disable @typescript-eslint/no-explicit-any -->
-<template>
-  <div
-    ref="containerRef"
-    class="dashboard-chart-container"
-    :style="cssVars"
-  >
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import type { ChartConfig } from "./types";
-
-export interface Props {
-  config: ChartConfig;
-}
-
-const props = defineProps<Props>();
-
-const containerRef = ref<HTMLElement>();
-
-const cssVars = computed(() => {
-  const vars: Record<string, string> = {};
-  const keys = Object.keys(props.config);
-  keys.forEach((key, index) => {
-    const item = props.config[key];
-    if (item.color) {
-      vars[`--vis-color${index}`] = item.color;
-    }
-  });
-  return vars;
-});
-
-defineSlots<{
-  default: (props: any) => any;
-}>();
-</script>
-
-<style lang="scss">
-@use "./chart-theme";
-
-.dashboard-chart-container {
-  @apply tw-w-full tw-h-full tw-min-h-0;
-
-  // Force Unovis host tooltip container to stay transparent.
-  --vis-tooltip-padding: 0;
-  --vis-tooltip-border-color: transparent;
-  --vis-tooltip-background-color: transparent;
-  --vis-tooltip-box-shadow: none;
-  --vis-tooltip-backdrop-filter: none;
-}
-</style>

package/shared/components/dashboard-charts/ChartLegend.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="dashboard-chart-legend">
-    <div
-      v-for="(item, key) in config"
-      :key="key"
-      class="dashboard-chart-legend__item"
-    >
-      <span
-        class="dashboard-chart-legend__indicator"
-        :style="{ background: item.color }"
-      />
-      <span class="dashboard-chart-legend__label">{{ item.label }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { ChartConfig } from "./types";
-
-export interface Props {
-  config: ChartConfig;
-}
-
-defineProps<Props>();
-</script>
-
-<style lang="scss">
-.dashboard-chart-legend {
-  @apply tw-flex tw-flex-wrap tw-items-center tw-justify-center tw-gap-x-4 tw-gap-y-1 tw-px-3 tw-py-2;
-
-  &__item {
-    @apply tw-flex tw-items-center tw-gap-1.5 tw-text-xs;
-    color: var(--neutrals-600);
-  }
-
-  &__indicator {
-    @apply tw-w-2 tw-h-2 tw-rounded-full tw-flex-shrink-0;
-  }
-}
-</style>

package/shared/components/dashboard-charts/ChartTooltip.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="dashboard-chart-tooltip">
-    <div
-      v-if="title"
-      class="dashboard-chart-tooltip__title"
-    >
-      {{ title }}
-    </div>
-    <div class="dashboard-chart-tooltip__items">
-      <div
-        v-for="(item, index) in items"
-        :key="index"
-        class="dashboard-chart-tooltip__item"
-      >
-        <span
-          class="dashboard-chart-tooltip__indicator"
-          :style="{ background: item.color }"
-        />
-        <span class="dashboard-chart-tooltip__label">{{ item.label }}</span>
-        <span class="dashboard-chart-tooltip__value">{{ item.value }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-export interface TooltipItem {
-  label: string;
-  value: string | number;
-  color: string;
-}
-
-export interface Props {
-  title?: string;
-  items: TooltipItem[];
-}
-
-defineProps<Props>();
-</script>
-
-<style lang="scss">
-@use "./chart-tooltip";
-</style>

package/shared/components/dashboard-charts/DashboardBarChart.vue

@@ -1,165 +0,0 @@
-<template>
-  <ChartContainer :config="config">
-    <VisXYContainer
-      :data="filteredData"
-      :height="height"
-      :margin="margin"
-    >
-      <VisTooltip
-        v-if="showTooltip"
-        :allow-hover="true"
-        class-name="dashboard-chart-tooltip-host"
-        :vertical-shift="8"
-        :triggers="barTooltipTriggers"
-      />
-      <VisGroupedBar
-        :x="xAccessor"
-        :y="yAccessors"
-        :color="colors"
-        :rounded-corners="4"
-        :bar-padding="0.2"
-      />
-      <VisAxis
-        v-if="showXAxis"
-        type="x"
-        :tick-line="false"
-        :domain-line="false"
-        :grid-line="false"
-        :num-ticks="numXTicks"
-        :tick-format="xTickFormat"
-      />
-      <VisAxis
-        v-if="showYAxis"
-        type="y"
-        :tick-line="false"
-        :domain-line="false"
-        :grid-line="showGrid"
-        :num-ticks="numYTicks"
-        :tick-format="yTickFormat"
-      />
-    </VisXYContainer>
-    <ChartLegend
-      v-if="showLegend"
-      :config="config"
-    />
-  </ChartContainer>
-</template>
-
-<script setup lang="ts" generic="T extends Record<string, any>">
-import { computed } from "vue";
-import {
-  VisXYContainer,
-  VisGroupedBar,
-  VisAxis,
-  VisTooltip,
-  VisGroupedBarSelectors,
-} from "@unovis/vue";
-import ChartContainer from "./ChartContainer.vue";
-import ChartLegend from "./ChartLegend.vue";
-import type { ChartConfig } from "./types";
-import type { ChartRangeValue } from "./chart-utils";
-import {
-  buildChartTooltipHtml,
-  filterDataByRange,
-  formatAxisValue,
-  formatNumericValue,
-  resolveSeriesMeta,
-} from "./chart-utils";
-
-export interface Props<T> {
-  data: T[];
-  config: ChartConfig;
-  xKey: keyof T;
-  yKeys: (keyof T)[];
-  height?: number;
-  showTooltip?: boolean;
-  showXAxis?: boolean;
-  showYAxis?: boolean;
-  showGrid?: boolean;
-  showLegend?: boolean;
-  numXTicks?: number;
-  numYTicks?: number;
-  rangeStart?: ChartRangeValue;
-  rangeEnd?: ChartRangeValue;
-  xTickFormat?: (value: number | Date) => string;
-  yTickFormat?: (value: number) => string;
-}
-
-const props = withDefaults(defineProps<Props<T>>(), {
-  height: undefined,
-  showTooltip: true,
-  showXAxis: true,
-  showYAxis: true,
-  showGrid: true,
-  showLegend: true,
-  numXTicks: undefined,
-  numYTicks: 5,
-  rangeStart: undefined,
-  rangeEnd: undefined,
-  xTickFormat: undefined,
-  yTickFormat: undefined,
-});
-
-const margin = { top: 8, right: 8, bottom: 4, left: 4 };
-
-const xAccessor = (d: T) => d[props.xKey] as number;
-
-const filteredData = computed(() =>
-  filterDataByRange(
-    props.data,
-    (datum) => datum[props.xKey],
-    props.rangeStart,
-    props.rangeEnd,
-  ),
-);
-
-const yAccessors = computed(() =>
-  props.yKeys.map((key) => (d: T) => d[key] as number),
-);
-
-const colors = computed(() =>
-  props.yKeys.map((key, index) =>
-    resolveSeriesMeta({
-      config: props.config,
-      key: String(key),
-      index,
-      fallbackLabel: String(key),
-    }).color,
-  ),
-);
-
-const barTooltipTriggers = computed(() => ({
-  [VisGroupedBarSelectors.bar]: (
-    datum: T,
-    seriesIndex: number,
-  ): string | null | undefined => {
-    if (!props.yKeys.length || seriesIndex < 0) {
-      return null;
-    }
-
-    const normalizedSeriesIndex = seriesIndex % props.yKeys.length;
-    const seriesKey = props.yKeys[normalizedSeriesIndex];
-    if (!seriesKey) {
-      return null;
-    }
-
-    const { label, color } = resolveSeriesMeta({
-      config: props.config,
-      key: String(seriesKey),
-      index: normalizedSeriesIndex,
-      fallbackLabel: String(seriesKey),
-    });
-
-    return buildChartTooltipHtml({
-      title: formatAxisValue(datum[props.xKey], props.xTickFormat),
-      items: [
-        {
-          label,
-          color,
-          value: formatNumericValue(datum[seriesKey], props.yTickFormat),
-        },
-      ],
-    });
-  },
-}));
-</script>

package/shared/components/dashboard-charts/DashboardDonutChart.vue

@@ -1,137 +0,0 @@
-<template>
-  <ChartContainer :config="config">
-    <VisSingleContainer
-      :data="data"
-      :height="height"
-    >
-      <VisDonut
-        :value="valueAccessor"
-        :color="colorAccessor"
-        :arc-width="arcWidth"
-        :corner-radius="cornerRadius"
-        :pad-angle="0.02"
-        :central-label="centralLabel"
-        :central-sub-label="centralSubLabel"
-      />
-      <VisTooltip
-        v-if="showTooltip"
-        :allow-hover="true"
-        class-name="dashboard-chart-tooltip-host"
-        :vertical-shift="8"
-        :triggers="donutTooltipTriggers"
-      />
-    </VisSingleContainer>
-    <ChartLegend
-      v-if="showLegend"
-      :config="config"
-    />
-  </ChartContainer>
-</template>
-
-<script setup lang="ts" generic="T extends Record<string, any>">
-import { computed } from "vue";
-import {
-  VisSingleContainer,
-  VisDonut,
-  VisTooltip,
-  VisDonutSelectors,
-} from "@unovis/vue";
-import ChartContainer from "./ChartContainer.vue";
-import ChartLegend from "./ChartLegend.vue";
-import type { ChartConfig } from "./types";
-import {
-  buildChartTooltipHtml,
-  formatNumericValue,
-  resolveSeriesMeta,
-} from "./chart-utils";
-
-interface DonutSegmentDatum {
-  data: T;
-  index: number;
-  value: number;
-}
-
-const props = withDefaults(defineProps<{
-  data: T[];
-  config: ChartConfig;
-  valueKey: keyof T;
-  colorKey?: keyof T;
-  height?: number;
-  arcWidth?: number;
-  cornerRadius?: number;
-  showTooltip?: boolean;
-  showLegend?: boolean;
-  centralLabel?: string;
-  centralSubLabel?: string;
-  valueFormat?: (value: number) => string;
-}>(), {
-  colorKey: undefined,
-  height: undefined,
-  arcWidth: 60,
-  cornerRadius: 4,
-  showTooltip: true,
-  showLegend: true,
-  centralLabel: undefined,
-  centralSubLabel: undefined,
-  valueFormat: undefined,
-});
-
-const valueAccessor = (d: T) => d[props.valueKey] as number;
-const configKeys = computed(() => Object.keys(props.config));
-
-const colorAccessor = (d: T, index: number) => {
-  if (props.colorKey && d[props.colorKey]) {
-    return d[props.colorKey] as string;
-  }
-  return configKeys.value[index]
-    ? props.config[configKeys.value[index]].color
-    : undefined;
-};
-
-const getSegmentLabel = (datum: T, index: number): string => {
-  const datumLabel = (datum as Record<string, unknown>).label;
-  if (typeof datumLabel === "string" && datumLabel.trim()) {
-    return datumLabel;
-  }
-
-  const configKey = configKeys.value[index];
-  if (configKey) {
-    return props.config[configKey]?.label ?? configKey;
-  }
-
-  return `Segment ${index + 1}`;
-};
-
-const donutTooltipTriggers = computed(() => ({
-  [VisDonutSelectors.segment]: (
-    segmentDatum: DonutSegmentDatum,
-  ): string | undefined => {
-    if (!segmentDatum?.data) {
-      return undefined;
-    }
-
-    const index = segmentDatum.index ?? 0;
-    const label = getSegmentLabel(segmentDatum.data, index);
-    const configKey = configKeys.value[index];
-    const { color } = resolveSeriesMeta({
-      config: props.config,
-      key: configKey,
-      index,
-      fallbackLabel: label,
-    });
-
-    return buildChartTooltipHtml({
-      items: [
-        {
-          label,
-          color: colorAccessor(segmentDatum.data, index) ?? color,
-          value: formatNumericValue(
-            segmentDatum.value ?? segmentDatum.data[props.valueKey],
-            props.valueFormat,
-          ),
-        },
-      ],
-    });
-  },
-}));
-</script>