@weni/unnnic-system 3.12.6-alpha-teleports.0 → 3.12.8-alpha.0

package/src/components/MultiSelect/MultiSelect.vue

@@ -1,297 +0,0 @@
-<template>
-  <div
-    :class="expand ? 'expand-multiselect' : 'normal-multiselect'"
-    tabindex="-1"
-  >
-    <span
-      v-if="label"
-      class="select-permission-label"
-      >{{ label }}</span
-    >
-    <div
-      class="select-permission"
-      tabindex="0"
-      @keypress="handleIsOpenKeyboard"
-      @click="active = !active"
-    >
-      <h6 class="title noselect">{{ inputTitle }}</h6>
-      <UnnnicIcon
-        :icon="active ? 'arrow-button-up-1' : 'arrow-button-down-1'"
-        size="sm"
-        scheme="neutral-dark"
-      />
-    </div>
-    <div
-      v-if="active"
-      v-on-click-outside="onClickOutside"
-      class="select-content"
-      tabindex="0"
-    >
-      <div>
-        <template
-          v-for="(group, indexGroup) in modelValue"
-          :key="`group-${indexGroup}`"
-        >
-          <h6
-            v-if="!hideGroupTitle"
-            :key="`title-${indexGroup}`"
-            class="title"
-          >
-            {{ group.title }}
-          </h6>
-          <section>
-            <template
-              v-for="(item, indexItem) in group.items"
-              :key="`item-${indexItem}`"
-            >
-              <div
-                v-if="hideRadio"
-                :key="indexItem + 'input'"
-                class="unnnic-radio-container unnnic-radio-container--sm"
-                style="cursor: pointer"
-                @click="change(indexGroup, indexItem)"
-              >
-                <strong>{{ item.title }}</strong>
-                <span>{{ item.description }}</span>
-              </div>
-              <UnnnicRadio
-                v-else
-                id=""
-                :key="'else' + indexItem + 'input'"
-                name=""
-                :modelValue="group.selected"
-                :value="indexItem"
-                size="sm"
-                class=""
-                @update:model-value="change(indexGroup, $event)"
-              >
-                <strong>{{ item.title }}</strong>
-                <span>{{ item.description }}</span>
-              </UnnnicRadio>
-            </template>
-          </section>
-        </template>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { vOnClickOutside } from '@vueuse/components';
-import UnnnicIcon from '../Icon.vue';
-import UnnnicRadio from '../Radio/Radio.vue';
-
-export default {
-  name: 'UnnnicMultiSelect',
-  components: {
-    UnnnicIcon,
-    UnnnicRadio,
-  },
-  directives: {
-    onClickOutside: vOnClickOutside,
-  },
-  props: {
-    isOpen: {
-      default: false,
-    },
-    expand: {
-      default: false,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: Array,
-      default: () => [],
-    },
-    inputTitle: {
-      type: String,
-      default: 'Teste',
-    },
-    hideRadio: {
-      type: Boolean,
-      default: false,
-    },
-    hideGroupTitle: {
-      type: Boolean,
-      default: false,
-    },
-    unselectable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      active: false,
-    };
-  },
-
-  watch: {
-    isOpen() {
-      this.active = this.open;
-    },
-  },
-  methods: {
-    handleIsOpenKeyboard(event) {
-      if (
-        document.querySelector('.select-permission:focus-visible') &&
-        event.keyCode === 32
-      ) {
-        this.active = !this.active;
-      }
-    },
-
-    onClickOutside() {
-      if (!this.active) return;
-      this.active = false;
-    },
-
-    change(indexGroup, indexSelected) {
-      this.$emit(
-        'update:model-value',
-        this.modelValue.map((item, index) => {
-          if (index === indexGroup) {
-            let selected = indexSelected;
-            if (this.unselectable && item.selected === indexSelected) {
-              selected = -1;
-            }
-            return { ...item, selected };
-          }
-
-          return item;
-        }),
-      );
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.normal-multiselect,
-.expand-multiselect {
-  user-select: none;
-}
-
-.normal-multiselect {
-  position: relative;
-  max-width: 319px;
-
-  .select-content {
-    max-width: 319px;
-  }
-}
-
-.expand-multiselect {
-  position: relative;
-  width: 100%;
-
-  .select-content {
-    width: 100%;
-  }
-}
-
-.noselect {
-  -webkit-touch-callout: none; /* iOS Safari */
-  -webkit-user-select: none; /* Safari */
-  -khtml-user-select: none; /* Konqueror HTML */
-  -moz-user-select: none; /* Old versions of Firefox */
-  -ms-user-select: none; /* Internet Explorer/Edge */
-  user-select: none; /* Non-prefixed version, currently
-                                  supported by Chrome, Edge, Opera and Firefox */
-}
-
-.select-permission,
-.select-content > div {
-  padding: $unnnic-squish-xs;
-  background-color: $unnnic-color-neutral-snow;
-
-  border-radius: $unnnic-border-radius-sm;
-  border: $unnnic-border-width-thinner solid $unnnic-color-neutral-soft;
-}
-.select-permission {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-
-  cursor: pointer;
-  .icon {
-    margin-left: $unnnic-spacing-inline-xs;
-  }
-}
-.select-permission-label {
-  display: block;
-
-  color: $unnnic-color-neutral-cloudy;
-  margin-bottom: $unnnic-spacing-stack-xs;
-
-  font-family: $unnnic-font-family-secondary;
-  font-size: $unnnic-font-size-body-gt;
-  line-height: $unnnic-font-size-body-gt + $unnnic-line-height-medium;
-}
-
-.title {
-  font-family: $unnnic-font-family-secondary;
-  font-size: $unnnic-font-size-body-gt;
-  margin: 0;
-  font-weight: $unnnic-font-weight-regular;
-  color: $unnnic-color-neutral-dark;
-}
-
-.select-content {
-  position: absolute;
-  margin-top: $unnnic-spacing-stack-xs;
-
-  > div {
-    box-shadow: $unnnic-shadow-level-near;
-    .title {
-      margin-bottom: $unnnic-spacing-stack-sm;
-    }
-
-    & section {
-      display: flex;
-      flex-direction: column;
-
-      & + h6 {
-        margin-top: $unnnic-spacing-stack-sm;
-        padding-top: $unnnic-spacing-stack-sm;
-        border-top: $unnnic-border-width-thinner solid
-          $unnnic-color-neutral-darkest;
-      }
-
-      strong,
-      span {
-        display: block;
-        font-family: $unnnic-font-family-secondary;
-        font-size: $unnnic-font-size-body-gt;
-      }
-
-      strong {
-        font-weight: $unnnic-font-weight-regular;
-      }
-      span {
-        font-weight: $unnnic-font-weight-light;
-      }
-
-      .unnnic-radio-container {
-        & + .unnnic-radio-container {
-          margin-top: $unnnic-spacing-stack-sm;
-          padding-top: $unnnic-spacing-stack-sm;
-          border-top: $unnnic-border-width-thinner solid
-            $unnnic-color-neutral-lightest;
-        }
-
-        :deep(.unnnic-icon) {
-          margin-right: $unnnic-inline-xs;
-        }
-      }
-    }
-  }
-}
-</style>

package/src/lib/__tests__/teleport-target.spec.ts

@@ -1,73 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import { ref } from 'vue';
-import {
-  getTeleportContainer,
-  getTeleportTarget,
-  setTeleportTarget,
-  useTeleportTarget,
-} from '@/lib/teleport-target';
-
-describe('teleport-target helpers', () => {
-  beforeEach(() => {
-    setTeleportTarget(null);
-    document.body.innerHTML = '';
-  });
-
-  it('stores and returns the raw teleport target', () => {
-    expect(getTeleportTarget()).toBeUndefined();
-
-    setTeleportTarget('#micro');
-    expect(getTeleportTarget()).toBe('#micro');
-
-    const element = document.createElement('section');
-    setTeleportTarget(element);
-    expect(getTeleportTarget()).toBe(element);
-  });
-
-  it('keeps the composable value in sync with global updates', () => {
-    const targetRef = useTeleportTarget();
-    expect(targetRef.value).toBeUndefined();
-
-    setTeleportTarget('#first');
-    expect(targetRef.value).toBe('#first');
-
-    setTeleportTarget('#second');
-    expect(targetRef.value).toBe('#second');
-  });
-
-  it('prefers local overrides over the shared teleport target', () => {
-    setTeleportTarget('#global');
-
-    const override = ref('#local-1');
-    const targetRef = useTeleportTarget(override);
-    expect(targetRef.value).toBe('#local-1');
-
-    override.value = '#local-2';
-    expect(targetRef.value).toBe('#local-2');
-  });
-
-  it('resolves DOM elements for selector targets', () => {
-    const host = document.createElement('div');
-    host.id = 'micro-root';
-    document.body.appendChild(host);
-
-    setTeleportTarget('#micro-root');
-    expect(getTeleportContainer()).toBe(host);
-  });
-
-  it('falls back to document.body when selector is missing or unset', () => {
-    setTeleportTarget('#missing');
-    expect(getTeleportContainer()).toBe(document.body);
-
-    setTeleportTarget(null);
-    expect(getTeleportContainer()).toBe(document.body);
-  });
-
-  it('returns the element itself when the target is an HTMLElement', () => {
-    const host = document.createElement('section');
-    document.body.appendChild(host);
-
-    setTeleportTarget(host);
-    expect(getTeleportContainer()).toBe(host);
-  });
-});

package/src/lib/teleport-target.ts

@@ -1,46 +0,0 @@
-import { computed, shallowRef, toValue, type MaybeRefOrGetter } from 'vue';
-
-export type TeleportTarget = string | HTMLElement;
-
-const teleportTargetRef = shallowRef<TeleportTarget | null>(null);
-
-export function setTeleportTarget(target?: TeleportTarget | null) {
-  teleportTargetRef.value = target ?? null;
-}
-
-export function getTeleportTarget() {
-  return teleportTargetRef.value ?? undefined;
-}
-
-export function useTeleportTarget(
-  override?: MaybeRefOrGetter<TeleportTarget | null | undefined>,
-) {
-  // Composable version, ideal for `<Teleport :to="...">` bindings because the
-  // returned ref stays reactive to both global and local overrides.
-  return computed(() => {
-    const localTarget = override ? toValue(override) : undefined;
-    return localTarget ?? teleportTargetRef.value ?? undefined;
-  });
-}
-
-function resolveTargetElement(target?: TeleportTarget | null) {
-  if (typeof document === 'undefined') {
-    return null;
-  }
-
-  if (!target) {
-    return document.body;
-  }
-
-  if (typeof target === 'string') {
-    return document.querySelector(target) ?? document.body;
-  }
-
-  return target;
-}
-
-export function getTeleportContainer() {
-  // Immediate DOM resolver for imperative consumers (e.g., Toast manager)
-  // that simply need the concrete HTMLElement to append to right away.
-  return resolveTargetElement(teleportTargetRef.value);
-}