@weni/unnnic-system 3.31.1-alpha.2 → 3.32.0

package/src/components/ui/drawer/DrawerOverlay.vue

@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+import type { DialogOverlayProps } from 'reka-ui';
+import { type HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DrawerOverlay } from 'vaul-vue';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+  name: 'UnnnicDrawerOverlay',
+});
+
+const props = defineProps<
+  DialogOverlayProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <DrawerOverlay
+    v-bind="delegatedProps"
+    :class="cn('unnnic-drawer__overlay', props.class)"
+  />
+</template>
+
+<style lang="scss" scoped>
+.unnnic-drawer__overlay {
+  position: fixed;
+  inset: 0;
+
+  background: rgba(53, 57, 69, 0.65);
+}
+</style>

package/src/components/ui/drawer/DrawerTitle.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import type { DrawerTitleProps } from 'vaul-vue';
+import { type HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DrawerTitle } from 'vaul-vue';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+  name: 'UnnnicDrawerTitle',
+});
+
+const props = defineProps<
+  DrawerTitleProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <DrawerTitle
+    v-bind="delegatedProps"
+    :class="cn('unnnic-drawer__title', props.class)"
+  >
+    <slot />
+  </DrawerTitle>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-drawer__title {
+  margin: 0;
+
+  color: $unnnic-color-fg-emphasized;
+  font: $unnnic-font-display-2;
+}
+</style>

package/src/components/ui/drawer/DrawerTrigger.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DrawerTriggerProps } from 'vaul-vue';
+import { DrawerTrigger } from 'vaul-vue';
+
+defineOptions({
+  name: 'UnnnicDrawerTrigger',
+});
+
+const props = defineProps<DrawerTriggerProps>();
+</script>
+
+<template>
+  <DrawerTrigger
+    v-bind="props"
+    class="unnnic-drawer__trigger"
+  >
+    <slot />
+  </DrawerTrigger>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-drawer__trigger {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+}
+</style>

package/src/components/ui/drawer/index.ts

@@ -0,0 +1,10 @@
+export { default as Drawer } from './Drawer.vue';
+export { default as DrawerContent } from './DrawerContent.vue';
+export { default as DrawerDescription } from './DrawerDescription.vue';
+export { default as DrawerFooter } from './DrawerFooter.vue';
+export { default as DrawerHeader } from './DrawerHeader.vue';
+export { default as DrawerOverlay } from './DrawerOverlay.vue';
+export { default as DrawerTitle } from './DrawerTitle.vue';
+export { default as DrawerTrigger } from './DrawerTrigger.vue';
+export { default as DrawerClose } from './DrawerClose.vue';
+export { DrawerPortal } from 'vaul-vue';

package/src/components/ui/popover/Popover.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui';
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui';
+
+defineOptions({
+  name: 'UnnnicPopover',
+});
+
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>

package/src/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,113 @@
+<template>
+  <PopoverPortal :to="portalTarget">
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :style="{ width: contentWidth, zIndex: popoverZIndex }"
+      :class="
+        cn(
+          'unnnic-popover',
+          'bg-popover text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        )
+      "
+    >
+      <section :class="`unnnic-popover__content ${props.class || ''}`">
+        <slot />
+      </section>
+
+      <div
+        ref="footerContainer"
+        data-testid="popover-footer-container"
+      />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
+
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { computed, provide, ref } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { useLayerZIndex } from '@/lib/layer-manager';
+import { useTeleportTarget } from '@/lib/teleport-target';
+import { POPOVER_FOOTER_TARGET } from './context';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<
+    PopoverContentProps & {
+      class?: HTMLAttributes['class'];
+      size?: string;
+      width?: string;
+    }
+  >(),
+  {
+    align: 'center',
+    sideOffset: 4,
+    size: 'medium',
+    class: '',
+    width: '',
+  },
+);
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+
+const popoverZIndex = useLayerZIndex();
+const portalTarget = useTeleportTarget();
+
+const footerContainer = ref<HTMLElement | null>(null);
+provide(POPOVER_FOOTER_TARGET, footerContainer);
+
+const contentWidth = computed(() => {
+  if (props.width) return props.width;
+
+  const sizes = {
+    small: '240px',
+    medium: '320px',
+    large: '400px',
+  };
+
+  return sizes[props.size as keyof typeof sizes];
+});
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+
+$popover-space: $unnnic-space-4;
+
+.unnnic-popover {
+  border-radius: $unnnic-radius-2;
+  box-shadow: $unnnic-shadow-1;
+  border: 1px solid $unnnic-color-border-soft;
+
+  &.bg-popover {
+    background-color: $unnnic-color-bg-base;
+  }
+
+  &::-webkit-scrollbar {
+    width: $unnnic-space-1;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: $unnnic-color-border-emphasized;
+    border-radius: $unnnic-border-radius-pill;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $unnnic-color-bg-muted;
+    border-radius: $unnnic-border-radius-pill;
+  }
+
+  &__content {
+    padding: $popover-space;
+  }
+}
+</style>

package/src/components/ui/popover/PopoverFooter.vue

@@ -0,0 +1,47 @@
+<template>
+  <Teleport
+    v-if="target"
+    :to="target"
+  >
+    <footer class="unnnic-popover__footer">
+      <slot />
+    </footer>
+  </Teleport>
+
+  <footer
+    v-else
+    class="unnnic-popover__footer"
+  >
+    <slot />
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import { POPOVER_FOOTER_TARGET } from './context';
+
+defineOptions({
+  name: 'UnnnicPopoverFooter',
+});
+
+// When rendered inside a PopoverContent, teleport into its footer container.
+// Falls back to inline rendering when used standalone (no target provided).
+const target = inject(POPOVER_FOOTER_TARGET, null);
+</script>
+
+<style lang="scss">
+@use '@/assets/scss/unnnic' as *;
+
+$popover-space: $unnnic-space-4;
+
+.unnnic-popover__footer {
+  border-top: 1px solid $unnnic-color-border-soft;
+
+  padding: $popover-space;
+
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: $unnnic-space-2;
+}
+</style>

package/src/components/ui/popover/PopoverOption.vue

@@ -0,0 +1,130 @@
+<template>
+  <div
+    :class="[
+      'unnnic-popover-option',
+      {
+        'unnnic-popover-option--disabled': props.disabled,
+        'unnnic-popover-option--active': props.active,
+        'unnnic-popover-option--focused': props.focused,
+        'unnnic-popover-option--with-content': hasDefaultSlot,
+      },
+    ]"
+  >
+    <UnnnicIcon
+      v-if="props.icon"
+      :icon="props.icon"
+      :scheme="schemeColor"
+      size="ant"
+    />
+    <slot>
+      <p
+        :class="[
+          'unnnic-popover-option__label',
+          `unnnic-popover-option__label--${schemeColor}`,
+          `unnnic-popover-option--disabled: ${props.disabled}`,
+        ]"
+      >
+        {{ props.label }}
+      </p>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UnnnicIcon from '@/components/Icon.vue';
+
+import type { SchemeColor } from '@/types/scheme-colors';
+import { computed, useSlots } from 'vue';
+
+defineOptions({
+  name: 'UnnnicPopoverOption',
+});
+
+interface PopoverOptionProps {
+  label: string;
+  disabled?: boolean;
+  active?: boolean;
+  focused?: boolean;
+  scheme?: SchemeColor;
+  icon?: string;
+}
+
+const props = withDefaults(defineProps<PopoverOptionProps>(), {
+  disabled: false,
+  active: false,
+  focused: false,
+  scheme: 'fg-emphasized',
+  icon: '',
+});
+
+const slots = useSlots();
+const hasDefaultSlot = computed(() => !!slots.default);
+
+const schemeColor = computed(() => {
+  if (props.active) {
+    return 'fg-on-primary';
+  }
+  if (props.disabled) {
+    return 'fg-muted';
+  }
+  return props.scheme;
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.unnnic-popover-option {
+  cursor: pointer;
+  border-radius: $unnnic-radius-2;
+  padding: $unnnic-space-2 $unnnic-space-4;
+  font: $unnnic-font-emphasis;
+  display: flex;
+  gap: $unnnic-space-2;
+  align-items: center;
+
+  &--with-content {
+    justify-content: space-between;
+  }
+
+  &:hover:not(&--active):not(&--disabled),
+  &--focused {
+    background-color: $unnnic-color-bg-soft;
+  }
+
+  &--active {
+    background-color: $unnnic-color-bg-active;
+  }
+
+  &--disabled {
+    color: $unnnic-color-fg-muted;
+    background-color: $unnnic-color-bg-muted;
+    cursor: not-allowed;
+  }
+
+  &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @each $name, $color in $unnnic-scheme-colors {
+      &.unnnic-popover-option__label--#{$name} {
+        color: $color;
+      }
+    }
+
+    &--disabled {
+      color: $unnnic-color-fg-muted;
+    }
+
+    &--active {
+      color: $unnnic-color-fg-on-primary;
+    }
+  }
+}
+</style>

package/src/components/ui/popover/PopoverTrigger.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui';
+import { PopoverTrigger } from 'reka-ui';
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+  <PopoverTrigger
+    v-bind="props"
+    class="unnnic-popover-trigger"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>
+
+<style lang="scss" scoped>
+.unnnic-popover-trigger {
+  border: none;
+  background: transparent;
+  padding: 0;
+
+  & > * {
+    width: 100%;
+  }
+}
+</style>

package/src/components/ui/popover/__tests__/PopoverFooter.spec.js

@@ -0,0 +1,116 @@
+import { mount, flushPromises } from '@vue/test-utils';
+import { describe, it, expect } from 'vitest';
+import PopoverContent from '../PopoverContent.vue';
+import PopoverFooter from '../PopoverFooter.vue';
+
+// Render reka-ui's portal/content inline so the component's own markup
+// (`.unnnic-popover__content` + footer container) is testable. The native
+// Teleport is kept real so we can assert the footer actually moves.
+const inlineSlot = { template: '<div><slot /></div>' };
+
+const globalStubs = {
+  PopoverPortal: inlineSlot,
+  PopoverContent: inlineSlot,
+};
+
+// A child component that renders the footer from its own template, simulating
+// a footer nested inside a consumer component rather than a direct slot child.
+const NestedFooterChild = {
+  components: { PopoverFooter },
+  template: `
+    <section data-testid="nested-wrapper">
+      <PopoverFooter>
+        <button data-testid="nested-footer-btn">Save</button>
+      </PopoverFooter>
+    </section>
+  `,
+};
+
+const mountPopover = (defaultSlot) =>
+  mount(PopoverContent, {
+    attachTo: document.body,
+    slots: { default: defaultSlot },
+    global: {
+      stubs: globalStubs,
+      components: { PopoverFooter, NestedFooterChild },
+    },
+  });
+
+const content = (wrapper) => wrapper.find('.unnnic-popover__content');
+const footerContainer = (wrapper) =>
+  wrapper.find('[data-testid="popover-footer-container"]');
+
+describe('UnnnicPopoverFooter', () => {
+  it('renders a direct footer child inside the footer container, outside the content', async () => {
+    const wrapper = mountPopover(
+      `<p data-testid="body">Body</p>
+       <PopoverFooter><button data-testid="footer-btn">Save</button></PopoverFooter>`,
+    );
+    await flushPromises();
+
+    expect(
+      footerContainer(wrapper).find('.unnnic-popover__footer').exists(),
+    ).toBe(true);
+    expect(content(wrapper).find('.unnnic-popover__footer').exists()).toBe(
+      false,
+    );
+    expect(wrapper.find('[data-testid="footer-btn"]').exists()).toBe(true);
+
+    wrapper.unmount();
+  });
+
+  it('renders a footer nested inside a child component in the footer container', async () => {
+    const wrapper = mountPopover('<NestedFooterChild />');
+    await flushPromises();
+
+    expect(
+      footerContainer(wrapper).find('.unnnic-popover__footer').exists(),
+    ).toBe(true);
+    expect(
+      footerContainer(wrapper)
+        .find('[data-testid="nested-footer-btn"]')
+        .exists(),
+    ).toBe(true);
+    expect(content(wrapper).find('.unnnic-popover__footer').exists()).toBe(
+      false,
+    );
+
+    wrapper.unmount();
+  });
+
+  it('renders no footer area when no footer is provided', async () => {
+    const wrapper = mountPopover('<p data-testid="body">Body</p>');
+    await flushPromises();
+
+    expect(wrapper.find('.unnnic-popover__footer').exists()).toBe(false);
+    expect(footerContainer(wrapper).element.children.length).toBe(0);
+
+    wrapper.unmount();
+  });
+
+  it('teleports every footer into the container when multiple are provided', async () => {
+    const wrapper = mountPopover(
+      `<PopoverFooter><span>First</span></PopoverFooter>
+       <PopoverFooter><span>Second</span></PopoverFooter>`,
+    );
+    await flushPromises();
+
+    const footers = footerContainer(wrapper).findAll('.unnnic-popover__footer');
+    expect(footers).toHaveLength(2);
+    expect(content(wrapper).find('.unnnic-popover__footer').exists()).toBe(
+      false,
+    );
+
+    wrapper.unmount();
+  });
+
+  it('renders inline as a fallback when used without a PopoverContent target', () => {
+    const wrapper = mount(PopoverFooter, {
+      slots: { default: '<button data-testid="standalone">Save</button>' },
+    });
+
+    const footer = wrapper.find('.unnnic-popover__footer');
+    expect(footer.exists()).toBe(true);
+    expect(footer.find('[data-testid="standalone"]').exists()).toBe(true);
+  });
+});

package/src/components/ui/popover/context.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export const POPOVER_FOOTER_TARGET: InjectionKey<Ref<HTMLElement | null>> =
+  Symbol('unnnicPopoverFooterTarget');

package/src/components/ui/popover/index.ts

@@ -0,0 +1,6 @@
+export { default as Popover } from './Popover.vue';
+export { default as PopoverContent } from './PopoverContent.vue';
+export { default as PopoverFooter } from './PopoverFooter.vue';
+export { default as PopoverTrigger } from './PopoverTrigger.vue';
+export { default as PopoverOption } from './PopoverOption.vue';
+export { PopoverAnchor } from 'reka-ui';

package/src/components/ui/segmented-control/SegmentedControlList.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsList } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { provide, computed } from 'vue';
+
+const props = withDefaults(
+  defineProps<
+    TabsListProps & {
+      size?: 'small' | 'medium';
+      class?: HTMLAttributes['class'];
+    }
+  >(),
+  {
+    size: 'medium',
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+provide(
+  'segmented-control-size',
+  computed(() => props.size),
+);
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn('unnnic-segmented-control-list', props.class)"
+  >
+    <slot />
+  </TabsList>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+
+.unnnic-segmented-control-list {
+  padding: $unnnic-space-1;
+
+  display: flex;
+  align-items: center;
+  gap: $unnnic-space-1;
+
+  border-radius: $unnnic-radius-2;
+  background-color: $unnnic-color-bg-soft;
+}
+</style>