@weni/unnnic-system 2.34.1-alpha.0 → 2.34.1-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "2.34.1-alpha.0",
+  "version": "2.34.1-alpha.1",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/Input/Input.vue

@@ -118,9 +118,6 @@ export default {
       return !!this.$slots.label;
     },
   },
-  methods: {
-    fullySanitize,
-  },
   watch: {
     val() {
       this.$emit('update:modelValue', fullySanitize(this.val));
@@ -132,6 +129,9 @@ export default {
   mounted() {
     this.val = this.modelValue;
   },
+  methods: {
+    fullySanitize,
+  },
 };
 </script>
 

package/src/components/SelectTime/index.vue

@@ -0,0 +1,195 @@
+<template>
+  <section
+    v-onClickOutside="() => (active = false)"
+    class="unnnic-select-time"
+  >
+    <DropdownSkeleton
+      ref="dropdown-skeleton"
+      type="manual"
+      :modelValue="active"
+      position="bottom"
+    >
+      <TextInput
+        :modelValue="modelValue"
+        :iconRight="active ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+        @focus="active = true"
+        @blur="handleBlur"
+        @update:model-value="handleInput"
+        @keydown.enter="handleBlur({ close: true })"
+      />
+
+      <template #inside="props">
+        <section
+          :style="{ width: props.width }"
+          class="unnnic-select-time__options"
+        >
+          <section
+            v-for="hour in hoursTimes"
+            :ref="`hour-${hour.value}`"
+            :key="hour.value"
+            :class="{
+              'unnnic-select-time__options__item': true,
+              'unnnic-select-time__options__item--selected':
+                modelValue === hour.value,
+            }"
+            @click="handleClickTimeOption(hour.value)"
+          >
+            {{ hour.label }}
+          </section>
+        </section>
+      </template>
+    </DropdownSkeleton>
+  </section>
+</template>
+
+<script>
+import { vOnClickOutside } from '@vueuse/components';
+
+import DropdownSkeleton from '../Dropdown/DropdownSkeleton.vue';
+import TextInput from '../Input/TextInput.vue';
+import { hoursTimes } from '../../utils/hours';
+
+export default {
+  name: 'SelectTime',
+  components: {
+    DropdownSkeleton,
+    TextInput,
+  },
+
+  directives: {
+    onClickOutside: vOnClickOutside,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['update:modelValue'],
+  data() {
+    return {
+      active: false,
+      hoursTimes,
+    };
+  },
+  methods: {
+    handleInput(text) {
+      const { value } =
+        this.hoursTimes.find((hour) => hour.value.includes(text)) || {};
+
+      if (value) {
+        const hourRef = this.$refs[`hour-${value}`][0];
+        if (hourRef) {
+          hourRef.scrollIntoView({ behavior: 'smooth' });
+        }
+      }
+
+      this.$emit('update:modelValue', text);
+    },
+
+    handleBlur({ close = false } = {}) {
+      if (this.modelValue) {
+        const cleanValue = this.modelValue.replace(/[^0-9]/g, '');
+
+        if (cleanValue.length > 0) {
+          let formattedTime = '';
+
+          if (cleanValue.length === 4) {
+            // Format: 0101 -> 01:01, 1310 -> 13:10
+            const hours = cleanValue.substring(0, 2);
+            const minutes = cleanValue.substring(2, 4);
+
+            if (parseInt(hours) <= 23 && parseInt(minutes) <= 59) {
+              formattedTime = `${hours}:${minutes}`;
+            }
+          } else if (cleanValue.length === 3) {
+            // Format: 123 -> 01:23
+            const hours = `0${cleanValue.substring(0, 1)}`;
+            const minutes = cleanValue.substring(1, 3);
+
+            if (parseInt(minutes) <= 59) {
+              formattedTime = `${hours}:${minutes}`;
+            }
+          } else if (cleanValue.length === 2) {
+            // Format: 12 -> 12:00
+            const hours = cleanValue;
+            formattedTime = `${hours}:00`;
+          } else if (cleanValue.length === 1) {
+            // Format: 1 -> 01:00
+            const hours = `0${cleanValue}`;
+            formattedTime = `${hours}:00`;
+          }
+
+          this.$emit('update:modelValue', formattedTime);
+        }
+      }
+
+      if (close) {
+        this.active = false;
+      }
+    },
+    handleClickTimeOption(value) {
+      this.$emit('update:modelValue', value);
+      this.active = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@/assets/scss/unnnic' as *;
+.unnnic-select-time {
+  &__options {
+    @function calc-max-height($value) {
+      @return ($value * $unnnic-font-size) - ($unnnic-spacing-xs * 2);
+    }
+    margin-top: $unnnic-spacing-nano;
+    border-radius: $unnnic-border-radius-sm;
+    box-shadow: $unnnic-shadow-level-near;
+    background-color: $unnnic-color-background-snow;
+    cursor: pointer;
+    display: grid;
+    max-height: calc-max-height(9.25);
+    overflow-y: auto;
+
+    &__item {
+      margin: 0px $unnnic-spacing-nano;
+      background-color: $unnnic-color-background-snow;
+      padding: $unnnic-spacing-stack-nano $unnnic-inline-xs;
+      max-width: 100%;
+      font-family: $unnnic-font-family-secondary;
+      color: $unnnic-color-neutral-darkest;
+      font-weight: $unnnic-font-weight-regular;
+
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      -webkit-line-clamp: 1;
+
+      &:hover {
+        border-radius: $unnnic-border-radius-sm;
+        background-color: $unnnic-color-neutral-light;
+      }
+
+      &--selected {
+        color: $unnnic-color-weni-600;
+        font-weight: $unnnic-font-weight-bold;
+      }
+    }
+
+    &::-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/index.js

@@ -86,6 +86,7 @@ import ModalNext from './ModalNext/ModalNext.vue';
 import ModalDialog from './ModalDialog/ModalDialog.vue';
 import Tour from './Tour/Tour.vue';
 import Navigator from './Navigator/index.vue';
+import SelectTime from './SelectTime/index.vue';
 
 export const components = {
   unnnicFormElement: formElement,
@@ -177,6 +178,7 @@ export const components = {
   unnnicTableNext: TableNext,
   unnnicTour: Tour,
   unnnicNavigator: Navigator,
+  unnnicSelectTime: SelectTime,
 };
 
 export const unnnicFontSize = fontSize;
@@ -269,3 +271,4 @@ export const unnnicDrawer = Drawer;
 export const unnnicTableNext = TableNext;
 export const unnnicTour = Tour;
 export const unnnicNavigator = Navigator;
+export const unnnicSelectTime = SelectTime;

package/src/stories/ChatsMessage.stories.js

@@ -187,8 +187,8 @@ export const MessageStatus = {
     components: { UnnnicChatsMessage },
     template: `
       <div style="display: flex; flex-direction: column; gap: 12px">
-        <UnnnicChatsMessage v-bind="args" status="send">
-          Send status
+        <UnnnicChatsMessage v-bind="args" status="sent">
+          Sent status
         </UnnnicChatsMessage>
         <UnnnicChatsMessage v-bind="args" status="received">
           Received status

package/src/stories/SelectTime.stories.js

@@ -0,0 +1,25 @@
+import unnnicSelectTime from '../components/SelectTime/index.vue';
+
+export default {
+  title: 'Select/SelectTime',
+  component: unnnicSelectTime,
+  argTypes: {},
+  render: (args) => ({
+    components: {
+      unnnicSelectTime,
+    },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        exampleValue: '',
+      };
+    },
+    template: `
+      <unnnicSelectTime v-bind="args" v-model="exampleValue" />
+    `,
+  }),
+};
+
+export const Default = {};

package/src/utils/hours.js

@@ -0,0 +1,388 @@
+const hoursTimes = [
+  {
+    label: '00:00',
+    value: '00:00',
+  },
+  {
+    label: '00:15',
+    value: '00:15',
+  },
+  {
+    label: '00:30',
+    value: '00:30',
+  },
+  {
+    label: '00:45',
+    value: '00:45',
+  },
+  {
+    label: '01:00',
+    value: '01:00',
+  },
+  {
+    label: '01:15',
+    value: '01:15',
+  },
+  {
+    label: '01:30',
+    value: '01:30',
+  },
+  {
+    label: '01:45',
+    value: '01:45',
+  },
+  {
+    label: '02:00',
+    value: '02:00',
+  },
+  {
+    label: '02:15',
+    value: '02:15',
+  },
+  {
+    label: '02:30',
+    value: '02:30',
+  },
+  {
+    label: '02:45',
+    value: '02:45',
+  },
+  {
+    label: '03:00',
+    value: '03:00',
+  },
+  {
+    label: '03:15',
+    value: '03:15',
+  },
+  {
+    label: '03:30',
+    value: '03:30',
+  },
+  {
+    label: '03:45',
+    value: '03:45',
+  },
+  {
+    label: '04:00',
+    value: '04:00',
+  },
+  {
+    label: '04:15',
+    value: '04:15',
+  },
+  {
+    label: '04:30',
+    value: '04:30',
+  },
+  {
+    label: '04:45',
+    value: '04:45',
+  },
+  {
+    label: '05:00',
+    value: '05:00',
+  },
+  {
+    label: '05:15',
+    value: '05:15',
+  },
+  {
+    label: '05:30',
+    value: '05:30',
+  },
+  {
+    label: '05:45',
+    value: '05:45',
+  },
+  {
+    label: '06:00',
+    value: '06:00',
+  },
+  {
+    label: '06:15',
+    value: '06:15',
+  },
+  {
+    label: '06:30',
+    value: '06:30',
+  },
+  {
+    label: '06:45',
+    value: '06:45',
+  },
+  {
+    label: '07:00',
+    value: '07:00',
+  },
+  {
+    label: '07:15',
+    value: '07:15',
+  },
+  {
+    label: '07:30',
+    value: '07:30',
+  },
+  {
+    label: '07:45',
+    value: '07:45',
+  },
+  {
+    label: '08:00',
+    value: '08:00',
+  },
+  {
+    label: '08:15',
+    value: '08:15',
+  },
+  {
+    label: '08:30',
+    value: '08:30',
+  },
+  {
+    label: '08:45',
+    value: '08:45',
+  },
+  {
+    label: '09:00',
+    value: '09:00',
+  },
+  {
+    label: '09:15',
+    value: '09:15',
+  },
+  {
+    label: '09:30',
+    value: '09:30',
+  },
+  {
+    label: '09:45',
+    value: '09:45',
+  },
+  {
+    label: '10:00',
+    value: '10:00',
+  },
+  {
+    label: '10:15',
+    value: '10:15',
+  },
+  {
+    label: '10:30',
+    value: '10:30',
+  },
+  {
+    label: '10:45',
+    value: '10:45',
+  },
+  {
+    label: '11:00',
+    value: '11:00',
+  },
+  {
+    label: '11:15',
+    value: '11:15',
+  },
+  {
+    label: '11:30',
+    value: '11:30',
+  },
+  {
+    label: '11:45',
+    value: '11:45',
+  },
+  {
+    label: '12:00',
+    value: '12:00',
+  },
+  {
+    label: '12:15',
+    value: '12:15',
+  },
+  {
+    label: '12:30',
+    value: '12:30',
+  },
+  {
+    label: '12:45',
+    value: '12:45',
+  },
+  {
+    label: '13:00',
+    value: '13:00',
+  },
+  {
+    label: '13:15',
+    value: '13:15',
+  },
+  {
+    label: '13:30',
+    value: '13:30',
+  },
+  {
+    label: '13:45',
+    value: '13:45',
+  },
+  {
+    label: '14:00',
+    value: '14:00',
+  },
+  {
+    label: '14:15',
+    value: '14:15',
+  },
+  {
+    label: '14:30',
+    value: '14:30',
+  },
+  {
+    label: '14:45',
+    value: '14:45',
+  },
+  {
+    label: '15:00',
+    value: '15:00',
+  },
+  {
+    label: '15:15',
+    value: '15:15',
+  },
+  {
+    label: '15:30',
+    value: '15:30',
+  },
+  {
+    label: '15:45',
+    value: '15:45',
+  },
+  {
+    label: '16:00',
+    value: '16:00',
+  },
+  {
+    label: '16:15',
+    value: '16:15',
+  },
+  {
+    label: '16:30',
+    value: '16:30',
+  },
+  {
+    label: '16:45',
+    value: '16:45',
+  },
+  {
+    label: '17:00',
+    value: '17:00',
+  },
+  {
+    label: '17:15',
+    value: '17:15',
+  },
+  {
+    label: '17:30',
+    value: '17:30',
+  },
+  {
+    label: '17:45',
+    value: '17:45',
+  },
+  {
+    label: '18:00',
+    value: '18:00',
+  },
+  {
+    label: '18:15',
+    value: '18:15',
+  },
+  {
+    label: '18:30',
+    value: '18:30',
+  },
+  {
+    label: '18:45',
+    value: '18:45',
+  },
+  {
+    label: '19:00',
+    value: '19:00',
+  },
+  {
+    label: '19:15',
+    value: '19:15',
+  },
+  {
+    label: '19:30',
+    value: '19:30',
+  },
+  {
+    label: '19:45',
+    value: '19:45',
+  },
+  {
+    label: '20:00',
+    value: '20:00',
+  },
+  {
+    label: '20:15',
+    value: '20:15',
+  },
+  {
+    label: '20:30',
+    value: '20:30',
+  },
+  {
+    label: '20:45',
+    value: '20:45',
+  },
+  {
+    label: '21:00',
+    value: '21:00',
+  },
+  {
+    label: '21:15',
+    value: '21:15',
+  },
+  {
+    label: '21:30',
+    value: '21:30',
+  },
+  {
+    label: '21:45',
+    value: '21:45',
+  },
+  {
+    label: '22:00',
+    value: '22:00',
+  },
+  {
+    label: '22:15',
+    value: '22:15',
+  },
+  {
+    label: '22:30',
+    value: '22:30',
+  },
+  {
+    label: '22:45',
+    value: '22:45',
+  },
+  {
+    label: '23:00',
+    value: '23:00',
+  },
+  {
+    label: '23:15',
+    value: '23:15',
+  },
+  {
+    label: '23:30',
+    value: '23:30',
+  },
+  {
+    label: '23:45',
+    value: '23:45',
+  },
+];
+
+export { hoursTimes };