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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.12.8",
+  "version": "3.14.0-alpha-teleports.0",
   "type": "commonjs",
   "files": [
     "dist",
@@ -63,6 +63,7 @@
     "reka-ui": "^2.6.0",
     "remark-gfm": "^4.0.0",
     "tw-animate-css": "^1.4.0",
+    "vaul-vue": "^0.4.1",
     "vue": "^3.4.8",
     "vue-i18n": "9",
     "vue-the-mask": "^0.11.1"
@@ -114,4 +115,4 @@
     "vue-eslint-parser": "^9.4.2",
     "vue-tsc": "^3.0.5"
   }
-}
+}

package/src/assets/scss/tailwind.scss

@@ -92,5 +92,13 @@
     @apply bg-background text-foreground;
     font-family: $unnnic-font-family;
   }
+
+  button {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+  }
 }
 

package/src/components/Alert/__tests__/__snapshots__/Alert.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`UnnnicAlert.vue > matches the snapshot 1`] = `
 "<transition-stub data-v-c3231c18="" name="toast-slide" appear="true" persisted="false" css="true" data-testid="toast-transition">
-  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--success" role="status" aria-live="polite" data-testid="toast">
+  <aside data-v-c3231c18="" class="unnnic-toast unnnic-toast--success" role="status" aria-live="polite" data-testid="toast" style="z-index: 1005;">
     <section data-v-c3231c18="" class="unnnic-toast__content" data-testid="toast-content">
       <header data-v-c3231c18="" class="unnnic-toast__header" data-testid="toast-header"><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--green-500 unnnic-icon-size--ant unnnic-icon__size--ant" data-testid="toast-type-icon" translate="no">check_circle</span>
         <h3 data-v-c3231c18="" class="unnnic-toast__title" data-testid="toast-title">Test Alert</h3><span data-v-26446d8e="" data-v-c3231c18="" class="unnnic-icon material-symbols-rounded unnnic-icon-scheme--neutral-dark unnnic-icon-size--ant unnnic-icon__size--ant unnnic--clickable unnnic-toast__close" data-testid="toast-close-icon" translate="no">close</span>

package/src/components/ChartFunnel/DefaultFunnel/ChartDefaultFunnelBase.vue

@@ -59,8 +59,9 @@ const props = defineProps<{
 }>();
 
 const calculatedTransform = computed(() => {
-  return `skew(${props.data.length === 2 ? '-8deg' : '-12deg'}, 0deg) translateX(-20px)`;
+  return `skew(${props.data.length === 2 ? '-8deg': '-12deg'}, 0deg) translateX(-20px)`;
 });
+
 </script>
 
 <style lang="scss" scoped>

package/src/components/ChartFunnel/SvgFunnel/ChartFunnelTwoRows.vue

@@ -1,64 +1,65 @@
 <template>
-  <ChartFunnelBaseRow
-    class="unnnic-chart-funnel-two-rows"
-    :rows="rows"
-    viewBox="0 0 250 148"
-  />
-</template>
-
-<script>
-import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
-export default {
-  name: 'UnnnicChartFunnelTwoRows',
-
-  components: {
-    ChartFunnelBaseRow,
-  },
-
-  props: {
-    data: {
-      type: Array,
-      required: true,
+    <ChartFunnelBaseRow
+      class="unnnic-chart-funnel-two-rows"
+      :rows="rows"
+      viewBox="0 0 250 148"
+    />
+  </template>
+  
+  <script>
+  import ChartFunnelBaseRow from './ChartFunnelBaseRow.vue';
+  export default {
+    name: 'UnnnicChartFunnelTwoRows',
+  
+    components: {
+      ChartFunnelBaseRow,
     },
-  },
-
-  computed: {
-    rows() {
-      const { data } = this;
-      return [
-        {
-          pathD:
-            'M362.938 0H12.025C6.30976 0 2.43799 5.81972 4.64626 11.0911L31 74H343.75L370.307 11.1122C372.535 5.83818 368.663 0 362.938 0Z',
-          titleX: '50%',
-          titleY: '32',
-          descriptionX: '50%',
-          descriptionY: '52',
-          title: data[0].title,
-          description: data[0].description,
-        },
-        {
-          pathD: 'M344 74H31L63.4654 148H311.535L344 74Z',
-          titleX: '50%',
-          titleY: '106',
-          descriptionX: '50%',
-          descriptionY: '126',
-          title: data[1].title,
-          description: data[1].description,
-        },
-      ];
+  
+    props: {
+      data: {
+        type: Array,
+        required: true,
+      },
     },
-  },
-};
-</script>
-
-<style lang="scss">
-@use '@/assets/scss/unnnic' as *;
-.unnnic-chart-funnel-two-rows {
-  [class$='row']:nth-child(1) {
-    fill: $unnnic-color-weni-950;
-  }
-  [class$='row']:nth-child(2) {
-    fill: $unnnic-color-weni-800;
+  
+    computed: {
+      rows() {
+        const { data } = this;
+        return [
+          {
+            pathD:
+              'M362.938 0H12.025C6.30976 0 2.43799 5.81972 4.64626 11.0911L31 74H343.75L370.307 11.1122C372.535 5.83818 368.663 0 362.938 0Z',
+            titleX: '50%',
+            titleY: '32',
+            descriptionX: '50%',
+            descriptionY: '52',
+            title: data[0].title,
+            description: data[0].description,
+          },
+          {
+            pathD: 'M344 74H31L63.4654 148H311.535L344 74Z',
+            titleX: '50%',
+            titleY: '106',
+            descriptionX: '50%',
+            descriptionY: '126',
+            title: data[1].title,
+            description: data[1].description,
+          }
+        ];
+      },
+    },
+  };
+  </script>
+  
+  <style lang="scss">
+  @use '@/assets/scss/unnnic' as *;
+  .unnnic-chart-funnel-two-rows {
+    [class$='row']:nth-child(1) {
+      fill: $unnnic-color-weni-950;
+    }
+    [class$='row']:nth-child(2) {
+      fill: $unnnic-color-weni-800;
+    }
   }
-}
-</style>
+  </style>
+  

package/src/components/Checkbox/Checkbox.vue

@@ -15,8 +15,8 @@
         type="checkbox"
         :disabled="disabled"
         :checked="modelValue === 'less' || modelValue"
-        @change="click"
         v-bind="pick($attrs, ['id', 'name'])"
+        @change="click"
       />
 
       <p

package/src/components/CheckboxGroup/CheckboxGroup.vue

@@ -1,10 +1,8 @@
 <template>
-  <section
-    :class="[
-      'unnnic-checkbox-group__container',
-      `unnnic-checkbox-group--state-${state}`,
-    ]"
-  >
+  <section :class="[
+    'unnnic-checkbox-group__container',
+    `unnnic-checkbox-group--state-${state}`,
+  ]">
     <UnnnicLabel
       v-if="label"
       :label="label"
@@ -54,7 +52,7 @@ const props = defineProps({
   },
 });
 </script>
-
+  
 <style lang="scss" scoped>
 @use '@/assets/scss/unnnic' as *;
 

package/src/components/Chip/Chip.vue

@@ -80,7 +80,7 @@ const chipClass = computed(() => {
   border-radius: 600px;
   background-color: $unnnic-color-bg-base;
   border: 1px solid transparent;
-
+  
   &:hover {
     background-color: $unnnic-color-bg-soft;
   }

package/src/components/DatePicker/DatePicker.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="unnnic-date-picker"
+    :class="['unnnic-date-picker', `unnnic-date-picker--${props.variant}`]"
     data-testid="date-picker-root"
   >
     <template v-if="type === 'day'">
@@ -296,6 +296,8 @@ export interface DatePickerProps {
 
   locale?: string;
   translations?: Record<string, unknown>;
+
+  variant?: 'card' | 'popover';
 }
 
 const props = withDefaults(defineProps<DatePickerProps>(), {
@@ -315,6 +317,7 @@ const props = withDefaults(defineProps<DatePickerProps>(), {
   disableClear: false,
   locale: undefined,
   translations: undefined,
+  variant: 'card',
 });
 
 const emit = defineEmits<{
@@ -963,6 +966,12 @@ onMounted(() => {
   box-shadow: $unnnic-shadow-level-separated;
   overflow: hidden;
 
+  &--popover {
+    border-radius: 0;
+    box-shadow: none;
+    overflow: visible;
+  }
+
   .month-container {
     display: flex;
     flex-direction: column;