@weni/unnnic-system 3.7.1-alpha.2 → 3.7.1

package/src/components/Popover/index.vue

@@ -1,146 +0,0 @@
-<template>
-  <section
-    ref="popover"
-    class="unnnic-popover"
-  >
-    <div
-      class="unnnic-popover__trigger"
-      data-testid="popover-trigger"
-      @click="toggleOpen()"
-    >
-      <slot name="trigger" />
-    </div>
-    <div
-      v-if="open"
-      class="unnnic-popover__balloon"
-      data-testid="popover-balloon"
-    >
-      <slot name="content" />
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, useTemplateRef, watch } from 'vue';
-import { onClickOutside, useResizeObserver } from '@vueuse/core';
-
-const target = useTemplateRef<HTMLDivElement>('popover');
-
-const popoverWidth = ref<string>('');
-
-useResizeObserver(target, (entries) => {
-  const entry = entries[0];
-  const { width } = entry.contentRect;
-  popoverWidth.value = `${width}px`;
-});
-
-onClickOutside(target, () => {
-  if (props.persistent) return;
-  open.value = false;
-});
-
-defineOptions({
-  name: 'UnnnicPopover',
-});
-
-interface PopoverBalloonProps {
-  width?: string;
-  height?: string;
-  maxHeight?: string;
-}
-
-interface PopoverProps {
-  modelValue?: boolean;
-  persistent?: boolean;
-  popoverBalloonProps?: PopoverBalloonProps;
-}
-
-const props = withDefaults(defineProps<PopoverProps>(), {
-  modelValue: undefined,
-  persistent: false,
-});
-
-const emit = defineEmits<{
-  'update:modelValue': [value: boolean];
-}>();
-
-const useModelValue = computed(() => props.modelValue !== undefined);
-
-const open = ref<boolean>(
-  useModelValue.value ? Boolean(props.modelValue) : false,
-);
-
-const toggleOpen = () => {
-  open.value = !open.value;
-};
-
-const calculatedPopoverWidth = computed(() => {
-  return props.popoverBalloonProps?.width || popoverWidth.value;
-});
-
-const popoverHeight = computed(() => {
-  return props.popoverBalloonProps?.height || 'unset';
-});
-
-const popoverMaxHeight = computed(() => {
-  return props.popoverBalloonProps?.maxHeight || 'unset';
-});
-
-onMounted(() => {
-  if (useModelValue.value) {
-    open.value = Boolean(props.modelValue);
-  }
-});
-
-watch(open, (value) => {
-  if (useModelValue.value) {
-    emit('update:modelValue', value);
-  }
-});
-
-watch(
-  () => props.modelValue,
-  (value) => {
-    open.value = !!value;
-  },
-);
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.unnnic-popover {
-  &__balloon {
-    border-radius: $unnnic-radius-2;
-    padding: $unnnic-space-4;
-    background: $unnnic-color-bg-base;
-    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16);
-    // margin-top: $unnnic-space-1;
-    position: fixed;
-    width: v-bind(calculatedPopoverWidth);
-    height: v-bind(popoverHeight);
-    max-height: v-bind(popoverMaxHeight);
-    overflow: auto;
-
-    &::-webkit-scrollbar {
-      width: $unnnic-spacing-inline-nano;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: $unnnic-color-neutral-cleanest;
-      border-radius: $unnnic-border-radius-pill;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: $unnnic-color-neutral-soft;
-      border-radius: $unnnic-border-radius-pill;
-    }
-  }
-}
-</style>

package/src/components/RadioGroup/RadioGroup.vue

@@ -1,142 +0,0 @@
-<template>
-  <section
-    :class="[
-      'unnnic-radio-group__container',
-      `unnnic-radio-group--state-${state}`,
-    ]"
-  >
-    <UnnnicLabel
-      v-if="label"
-      :label="label"
-      :tooltip="labelTooltip"
-      :useHtmlTooltip="labelUseHtmlTooltip"
-      class="unnnic-radio-group__label"
-    />
-
-    <section class="unnnic-radio-group__radios">
-      <slot />
-    </section>
-
-    <footer
-      v-if="helper"
-      class="unnnic-radio-group__helper"
-    >
-      {{ helper }}
-    </footer>
-  </section>
-</template>
-
-<script setup>
-import { ref, provide, watch, computed } from 'vue';
-import UnnnicLabel from '../Label/Label.vue';
-
-const props = defineProps({
-  modelValue: {
-    type: [String, Number],
-    default: '',
-  },
-
-  state: {
-    type: String,
-    default: 'horizontal',
-    validator(value) {
-      return ['horizontal', 'vertical'].includes(value);
-    },
-  },
-
-  label: {
-    type: String,
-  },
-
-  labelTooltip: {
-    type: String,
-  },
-
-  labelUseHtmlTooltip: {
-    type: Boolean,
-  },
-
-  name: {
-    type: String,
-    default: '',
-  },
-
-  helper: {
-    type: String,
-  },
-});
-
-const emit = defineEmits(['update:modelValue']);
-
-const contextModelValue = ref(props.modelValue);
-
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (newVal !== contextModelValue.value) {
-      contextModelValue.value = newVal;
-    }
-  },
-);
-
-watch(contextModelValue, (newVal) => {
-  if (newVal !== props.modelValue) {
-    emit('update:modelValue', newVal);
-  }
-});
-
-const computedName = computed(() => {
-  return (
-    props.name ||
-    `unnnic-radio-group-${Math.random().toString(36).substring(2, 15)}`
-  );
-});
-
-provide('contextModelValue', contextModelValue);
-provide('contextName', computedName);
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-
-.unnnic-radio-group {
-  &__container {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &__label {
-    margin-bottom: $unnnic-space-3;
-  }
-
-  &__radios {
-    display: flex;
-    gap: $unnnic-space-4 $unnnic-space-6;
-  }
-
-  &__helper {
-    font: $unnnic-font-caption-2;
-    color: $unnnic-color-fg-base;
-  }
-
-  &--state-horizontal {
-    .unnnic-radio-group__radios {
-      flex-direction: row;
-    }
-
-    .unnnic-radio-group__helper {
-      margin-top: $unnnic-space-2;
-    }
-  }
-
-  &--state-vertical {
-    .unnnic-radio-group__radios {
-      flex-direction: column;
-    }
-
-    .unnnic-radio-group__helper {
-      margin-top: $unnnic-space-3;
-    }
-  }
-}
-</style>

package/src/components/Select/SelectOption.vue

@@ -1,65 +0,0 @@
-<template>
-  <div
-    :class="[
-      'unnnic-select-option',
-      {
-        'unnnic-select-option--disabled': props.disabled,
-        'unnnic-select-option--active': props.active,
-        'unnnic-select-option--focused': props.focused,
-      },
-    ]"
-  >
-    <p class="unnnic-select-option__label">{{ props.label }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineOptions({
-  name: 'UnnnicSelectOption',
-});
-
-interface SelectOptionProps {
-  label: string;
-  disabled?: boolean;
-  active?: boolean;
-  focused?: boolean;
-}
-
-const props = withDefaults(defineProps<SelectOptionProps>(), {
-  disabled: false,
-  active: false,
-  focused: false,
-});
-</script>
-
-<style lang="scss" scoped>
-@use '@/assets/scss/unnnic' as *;
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.unnnic-select-option {
-  cursor: pointer;
-  border-radius: $unnnic-radius-1;
-  padding: $unnnic-space-2 $unnnic-space-4;
-  font: $unnnic-font-emphasis;
-
-  &:hover:not(&--active):not(&--disabled),
-  &--focused {
-    background-color: $unnnic-color-bg-soft;
-  }
-
-  &--active {
-    background-color: $unnnic-color-bg-active;
-    color: $unnnic-color-fg-inverted;
-  }
-
-  &--disabled {
-    color: $unnnic-color-fg-muted;
-    background-color: $unnnic-color-bg-muted;
-    cursor: not-allowed;
-  }
-}
-</style>