feat: base of refactor mask

Author: linspw

.eslintrc.js

@@ -22,7 +22,7 @@ module.exports = {
     }],
     'no-param-reassign': 'off',
     'max-len': ['error', {
-      code: 120,
+      code: 140,
       tabWidth: 2,
       ignoreUrls: true,
     }],

configs/storybook/helper.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-useless-escape */
 /* eslint-disable no-restricted-syntax */
 import dedent from 'ts-dedent';
-import { paramCase } from 'param-case';
+import { paramCase } from 'change-case';
 
 const templateSourceCode = (
   templateSource,

configs/storybook/preview.js

@@ -1,8 +1,10 @@
 import { app } from '@storybook/vue3';
 import { CoreUIPlugin } from '@plugins/core-ui-plugin';
+import { MaskPlugin } from '@plugins/mask-plugin';
 import { transformSource, tokenFiles } from './helper';
 import '@styles/index.scss';
 
+app.use(MaskPlugin);
 app.use(CoreUIPlugin);
 
 export const parameters = {

package.json

@@ -32,8 +32,10 @@
     }
   },
   "dependencies": {
+    "change-case": "^4.1.2",
     "flush-promises": "^1.0.2",
-    "mask-imp": "^1.0.8"
+    "maska": "^1.5.0",
+    "validate": "^5.2.0"
   },
   "peerDependencies": {
     "vue": "^3.2.26"
@@ -73,7 +75,6 @@
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^27.4.5",
-    "param-case": "^3.0.4",
     "sass": "^1.46.0",
     "sass-loader": "^12.4.0",
     "semantic-release": "^18.0.1",

src/components/atoms/index.js

@@ -16,3 +16,4 @@ export * from './loading';
 export * from './checkbox';
 export * from './radio';
 export * from './menu';
+export * from './text-field';

src/components/atoms/menu/menu-item.vue

@@ -58,6 +58,7 @@ const handleClick = () => {
   align-items: center;
   transition: background-color 0.25s;
   background-color: var(--h-menu-item-background-color);
+  white-space: nowrap;
 
   &:hover {
     --h-menu-item-background-color: var(--h-menu-item-background-color--hover);

src/components/atoms/select/select.stories.mdx

@@ -20,6 +20,7 @@ import HSelect from './select.vue';
         template: `
         <div style="height: 40vh;">
           <h-select
+            label="Exemplo"
             v-model="selected"
             :options="['example1', 'Example 1']"
           />
@@ -90,6 +91,23 @@ import HSelect from './select.vue';
   </Story>
 </Canvas>
 
+### HelperText:
+
+<Canvas>
+  <Story name="HelperText">
+    {{
+        components: { HSelect },
+        template: `
+        <div>
+          <h-select helper-text="Helper text" :options="['yes', 'no']" />
+          <h-select helper-text="Invalid" invalid :options="['yes', 'no']" />
+        </div>
+        `,
+    }}
+  </Story>
+</Canvas>
+
+
 ### placeholder:
 
 <Canvas>
@@ -132,7 +150,9 @@ import HSelect from './select.vue';
         <div>
           <h-select placeholder="default" behavior="default" />
           <p />
-          <h-select placeholder="block" behavior="block" />
+          <h-select invalid />
+          <p />
+          <h-select placeholder="block" block />
         </div>
         `,
     }}

src/components/atoms/select/select.vue

@@ -2,16 +2,24 @@
   <div
     :class="{
       'h-select': true,
+      [`h-select--behavior-invalid`]: state.internalInvalid,
       [`h-select--behavior-block`]: block,
-      [`h-select--behavior-has-value`]: hasValue,
-      [`h-select--size-${size}`]: size,
+      [`h-select--behavior-has-value`]: state.hasValue,
     }"
   >
+    <label
+      v-if="label"
+      class="h-select__label"
+    >
+      {{ label }}
+    </label>
+
     <select
       class="h-select__field"
       v-bind="$attrs"
-      :value="internalValue"
-      @change.stop="handlerChange($event?.target?.value)"
+      :value="state.internalValue"
+      :name="state.name"
+      @change.stop="handlerChange"
     >
       <option
         v-if="placeholder"
@@ -28,11 +36,23 @@
         v-for="(option, index) in options"
         :key="option.value || index"
         class="h-select__field-option"
-        :value="option.value || option"
+        :value="getOption(option, 'value')"
       >
-        {{ option.text || option }}
+        {{ getOption(option, 'text') }}
       </option>
     </select>
+
+    <h-text
+      v-if="helperTextActive"
+      class="h-select__helper-text"
+      size="extra-small"
+      weight="medium"
+      emphasis="high"
+    >
+      <template v-if="state.helperTextVisible">
+        {{ state.internalTextValue }}
+      </template>
+    </h-text>
   </div>
 </template>
 
@@ -41,11 +61,30 @@ import { shouldBeOneOf } from '@utils/validations';
 import {
   selectSizes,
 } from '@assets/constants';
+import { HFormKey } from '@components/molecules/form';
+import {
+  computed,
+  reactive,
+  ref,
+  onMounted,
+  watch,
+  inject,
+  toRef,
+} from 'vue';
+import { Validate } from '@utils/validations/validate';
 
 export default {
   name: 'HSelect',
   inheritAttrs: false,
   props: {
+    label: {
+      type: String,
+      default: null,
+    },
+    name: {
+      type: String,
+      default: null,
+    },
     block: {
       type: Boolean,
       default: false,
@@ -73,82 +112,133 @@ export default {
       type: [Object, String],
       default: null,
     },
-  },
-  emits: ['input', 'change', 'select', 'update:modelValue'],
-  computed: {
-    internalValue() {
-      return this.value || this.modelValue;
+    invalid: {
+      type: Boolean,
+      default: false,
+    },
+    helperTextActive: {
+      type: Boolean,
+      default: true,
     },
-    hasValue() {
-      return Boolean(this.internalValue);
+    helperText: {
+      type: String,
+      default: null,
     },
-  },
-  methods: {
-    handlerChange(value) {
-      this.$emit('input', value);
-      this.$emit('change', value);
-      this.$emit('select', value);
-      this.$emit('update:modelValue', value);
+    rules: {
+      type: Object,
+      default: null,
     },
   },
+  emits: ['input', 'change', 'select', 'update:modelValue'],
+  setup($props, { emit: $emit }) {
+    const HForm = inject(HFormKey, undefined);
+
+    const state = reactive({
+      internalValue: computed(() => $props.value || $props.modelValue),
+      hasValue: computed(() => Boolean(state.internalValue)),
+      validationMessages: null,
+      validationActive: true,
+      helperTextVisible: computed(() => $props.helperText || state.invalid),
+      invalid: computed(() => Boolean(state.validationActive && state.validationMessages?.length)),
+      internalTextValue: computed(() => state.validationMessages?.[0]?.message || $props.helperText),
+      internalInvalid: computed(() => $props.invalid || state.invalid),
+      name: computed(() => $props.name || $props.label || 'Campo'),
+      currentValidation: computed(() => ({
+        name: state.name,
+        value: state.internalValue,
+        tag: 'select',
+        type: 'simple',
+        messages: state.validationMessages,
+      })),
+    });
+
+    const checkValidation = (validationActive) => {
+      if (!$props.rules) return;
+      state.validationActive = Boolean(validationActive);
+      state.validationMessages = Validate(state.internalValue, $props.rules);
+    };
+
+    const getOption = (option, key) => (Object.prototype.hasOwnProperty.call(option, key)
+      ? option[key]
+      : option);
+
+    const handlerChange = ($event) => {
+      const value = $event?.target?.value;
+      console.log(value);
+      $emit('input', value);
+      $emit('change', value);
+      $emit('select', value);
+      $emit('update:modelValue', value);
+    };
+
+    const currentValidation = toRef(state, 'currentValidation');
+
+    watch(() => state.internalValue, () => checkValidation(true));
+
+    onMounted(() => {
+      if ($props.rules) checkValidation($props?.rules?.startValidating);
+      if (HForm) HForm.registerField(currentValidation);
+    });
+
+    return {
+      state,
+      handlerChange,
+      getOption,
+    };
+  },
 };
 </script>
 
 <style lang="scss">
 :root {
-  --h-select--border-color: var(--color-theme-primary);
-  --h-select--border-radius: var(--border-radius-normal);
-  --h-select--border-style:  solid;
-  --h-select--border-width: var(--size-base-micro);
+  --h-select__field--border-color: var(--color-theme-primary);
+  --h-select__field--border-radius: var(--border-radius-normal);
+  --h-select__field--border-style:  solid;
+  --h-select__field--border-width: var(--size-base-micro);
   --h-select__field--color: var(--color-theme-primary);
   --h-select__field--background-color: var(--color-theme-white);
+
+  --h-select-width: 250px;
+
+  --h-select__label-font-weight: 500;
+  --h-select__label-margin-bottom: var(--size-base-small);
+  --h-select__field--height: 44px;
+
+  --h-select__helper-text-color: var(--color-theme-grey);
+  --h-select__helper-text-color--invalid: var(--color-theme-danger);
+  --h-select__helper-text-height: var(--size-base-medium);
 }
 
 .h-select {
-  border-color: var(--h-select--border-color);
-  border-radius: var(--h-select--border-radius);
-  border-style: var(--h-select--border-style);
-  border-width: var(--h-select--border-width);
-
-  display: inline-flex;
+  display: inline-block;
   font-family: 'Red Hat Text', sans-serif;
   height: fit-content;
   position: relative;
-  width: 303px;
-
-  &--size {
-    &-small {
-      & > .h-select__field {
-        min-height: var(--size-base-extra-large);
-        font-size: var(--size-scalable-micro);
-      }
-    }
-    &-medium {
-      & > .h-select__field {
-        min-height: var(--size-base-jumbo);
-        font-size: var(--size-scalable-extra-small);
-      }
-    }
-  }
+  width: var(--h-select-width);
 
   &--behavior {
     &-block {
       width: 100%;
     }
     &-has-value {
-      --h-select__field--background-color: var(--color-blue-grey-scale-100);
+      --h-select__field--background-color: var(--color-blue-grey-scale-050);
+    }
+    &-invalid {
+      --h-select__field--border-color: var(--color-pink-scale-alpha-400);
+      --h-select__helper-text-color: var(--h-select__helper-text-color--invalid);
     }
   }
 
   &__field {
+    border-color: var(--h-select__field--border-color);
+    border-radius: var(--h-select__field--border-radius);
+    border-style: var(--h-select__field--border-style);
+    border-width: var(--h-select__field--border-width);
     background-color: var(--h-select__field--background-color);
-    border-radius: var(--border-radius-normal);
-    border: none;
     color: var(--h-select__field--color);
-    flex: 1;
     font-family: 'Red Hat Text', sans-serif;
     font-weight: 500;
-    height: 100%;
+    height: var(--h-select__field--height);
     left: 0;
     padding-left: var(--size-base-medium);
     padding-right: var(--size-base-medium);
@@ -158,10 +248,23 @@ export default {
   }
 }
 
+.h-select__label {
+  font-weight: var(--h-select__label-font-weight);
+  margin-bottom: var(--h-select__label-margin-bottom);
+  display: inline-block;
+}
+
 .h-select__field--placeholder {
   color: var(--color-blue-grey-scale-300);
   font-weight: 500;
   font-style: italic;
 }
 
+.h-select__helper-text {
+  --h-text--color: var(--h-select__helper-text-color);
+  margin-top: var(--size-base-extra-small);
+  padding-left: var(--size-base-small);
+  padding-right: var(--size-base-small);
+  min-height: var(--h-select__helper-text-height);
+}
 </style>

src/components/atoms/text-field/index.js

@@ -1,3 +1,3 @@
-import TextField from './text-field.vue';
+import HTextField from './text-field.vue';
 
-export { TextField };
+export { HTextField };