release(3.0.0 next.10): MazInputTags

packages/docs/docs/.vuepress/configs/components.ts

@@ -10,6 +10,7 @@ export const components = {
         '/components/maz-input.md',
         '/components/maz-input-number.md',
         '/components/maz-input-price.md',
+        '/components/maz-input-tags.md',
         '/components/maz-picker.md',
         '/components/maz-phone-number-input.md',
         '/components/maz-select.md',

packages/docs/docs/components/maz-input-tags.md

@@ -0,0 +1,45 @@
+---
+description: MazInputTags is a stand-alone component like free inputs to help user select many values and return an Array of strings, color option available.
+---
+
+# MazInputTags
+
+> Before you have to import the global css files in your project, follow instructions in [Getting Started](/maz-ui-3/guide/getting-started.html)
+
+## Basic usage
+
+<MazInputTags
+  v-model="tags"
+  label="Enter tags"
+  color="info"
+/>
+
+`tags: {{ tags }}`
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  const tags = ref(['tags 1', 'tags 2'])
+</script>
+
+```vue
+<template>
+  <MazInputTags
+    v-model="tags"
+    placeholder="Enter tags"
+    color="info"
+  />
+</template>
+
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import MazInputTags from 'maz-ui/components/MazInputTags'
+
+  const tags = ref(['tags 1', 'tags 2'])
+</script>
+```
+
+## Props, Events emitted
+
+<ComponentPropDoc component="MazInputTags" />

packages/lib/package/components/MazAvatar.vue

@@ -43,7 +43,11 @@
         type="button"
         tabindex="-1"
         class="m-avatar__button"
-        :style="{ backgroundColor: `var(--maz-color-${buttonColor}-alpha)` }"
+        :style="{
+          backgroundColor: src
+            ? `var(--maz-color-${buttonColor}-alpha)`
+            : `var(--maz-color-${buttonColor})`,
+        }"
         @click="$emit('click', $event)"
       >
         <slot name="icon">
@@ -103,7 +107,7 @@
     noLoader: { type: Boolean, default: false },
     buttonColor: {
       type: String as PropType<Color>,
-      default: 'primary',
+      default: 'info',
       validator: (value: Color) => {
         return [
           'primary',
@@ -197,12 +201,6 @@
 
       &.--has-initial {
         @apply maz-items-center maz-bg-primary;
-
-        &.--clickable {
-          & .m-avatar__button {
-            @apply maz-bg-danger;
-          }
-        }
       }
     }
 

packages/lib/package/components/MazBtn.vue

@@ -23,15 +23,15 @@
     ]"
     :type="btnType"
   >
-    <div v-if="hasLeftIcon" class="m-btn__icon-left">
+    <div v-if="hasLeftIcon" class="m-btn__icon-left maz-flex maz-flex-center">
       <slot name="left-icon">
         <MazIcon v-if="leftIcon" :name="leftIcon" />
       </slot>
     </div>
     <span class="maz-flex maz-flex-center">
       <slot></slot>
     </span>
-    <div v-if="hasRightIcon" class="m-btn__icon-right">
+    <div v-if="hasRightIcon" class="m-btn__icon-right maz-flex maz-flex-center">
       <slot name="right-icon">
         <MazIcon v-if="rightIcon" :name="rightIcon" />
       </slot>

packages/lib/package/components/MazInput.vue

@@ -224,7 +224,7 @@
           if (props.color === 'warning') return 'maz-border-warning'
           if (props.color === 'white') return 'maz-border-white'
         }
-        return 'maz-border-gray-200'
+        return 'maz-border-color-lighter'
       })
 
       const computedPlaceholder = computed(() => {
@@ -310,8 +310,6 @@
 </script>
 
 <style lang="postcss" scoped>
-  /* stylelint-disable no-descending-specificity */
-
   .m-input {
     @apply maz-flex maz-flex-col;
 

packages/lib/package/components_tmp/MazInputTags.vue → packages/lib/package/components/MazInputTags.vue

@@ -1,16 +1,9 @@
 <template>
   <div
     class="m-input-tags"
-    :class="[
-      {
-        'maz-border-primary': isFocus && !error,
-        'maz-border-danger': error,
-        'maz-border-gray-200': !error && !isFocus,
-      },
-    ]"
-    :style="{ fontSize: size }"
-    @focus.capture="isFocus = true"
-    @blur.capture="isFocus = false"
+    :class="[borderStyle, `--${color}`]"
+    @focus.capture="isFocused = true"
+    @blur.capture="isFocused = false"
   >
     <TransitionGroup name="maz-tags">
       <div v-for="(tag, i) in modelValue" :key="`tag-${i}`">
@@ -25,7 +18,7 @@
             {{ tag }}
           </template>
           <template #right-icon>
-            <MazIcon :src="XIcon" class="m-input-tags__tag__icon" />
+            <MazIcon name="x" size="1em" class="m-input-tags__tag__icon" />
           </template>
         </MazBtn>
       </div>
@@ -35,7 +28,8 @@
       v-model="inputValue"
       v-bind="$attrs"
       :placeholder="placeholder"
-      :aria-label="placeholder"
+      :label="label"
+      :aria-label="label || placeholder"
       :error="error"
       :disabled="disabled"
       :color="color"
@@ -49,11 +43,12 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, PropType } from 'vue'
-  import MazBtn from '../ui/MazBtn.vue'
+  import { ref, PropType, computed } from 'vue'
+
+  import MazBtn from './MazBtn.vue'
   import MazInput from './MazInput.vue'
-  import MazIcon from '../ui/MazIcon.vue'
-  import XIcon from '../icons/x.svg'
+  import MazIcon from './MazIcon.vue'
+  import { Color, Size } from './types'
 
   const props = defineProps({
     // Input value, can be a `Array` of `String` or `null`
@@ -63,19 +58,40 @@
     },
     // input placeholder
     placeholder: { type: String, default: undefined },
+    label: { type: String, default: undefined },
     // When is `true` the input is disable
     disabled: { type: Boolean, default: false },
-    // When is `true` the input has the dark theme
-    dark: { type: Boolean, default: false },
     // When is `true` the input has the error style (red)
     error: { type: Boolean, default: false },
-    // input size (`'em'` / `'rem'`)
-    size: { type: String, default: undefined },
-    // color option
-    color: { type: String, default: 'primary' },
+    success: { type: Boolean, default: false },
+    warning: { type: Boolean, default: false },
+    size: {
+      type: String as PropType<Size>,
+      default: 'md',
+      validator: (value: string) => {
+        return ['mini', 'xs', 'sm', 'md', 'lg', 'xl'].includes(value)
+      },
+    },
+    color: {
+      type: String as PropType<Color>,
+      default: 'primary',
+      validator: (value: Color) => {
+        return [
+          'primary',
+          'secondary',
+          'info',
+          'success',
+          'warning',
+          'danger',
+          'white',
+          'black',
+          'transparent',
+        ].includes(value)
+      },
+    },
   })
 
-  const isFocus = ref(false)
+  const isFocused = ref(false)
   const inputValue = ref<string>()
 
   const emits = defineEmits(['update:model-value'])
@@ -96,6 +112,25 @@
     }
   }
 
+  const borderStyle = computed(() => {
+    if (props.error) return 'maz-border-danger'
+    if (props.success) return 'maz-border-success'
+    if (props.warning) return 'maz-border-warning'
+
+    if (isFocused.value) {
+      if (props.color === 'primary') return 'maz-border-primary'
+      if (props.color === 'secondary') return 'maz-border-secondary'
+      if (props.color === 'info') return 'maz-border-info'
+      if (props.color === 'danger') return 'maz-border-danger'
+      if (props.color === 'success') return 'maz-border-success'
+      if (props.color === 'warning') return 'maz-border-warning'
+      if (props.color === 'black') return 'maz-border-black'
+      if (props.color === 'white') return 'maz-border-white'
+    }
+
+    return 'maz-border-color-lighter'
+  })
+
   const removeLastTag = () => {
     if (!inputValue.value || inputValue.value === '') {
       const tagsArray = JSON.parse(JSON.stringify(props.modelValue))
@@ -114,24 +149,32 @@
 <style lang="postcss" scoped>
   .m-input-tags {
     @apply maz-relative maz-flex maz-flex-wrap maz-items-center
-    maz-overflow-hidden maz-rounded-lg maz-border-2 maz-px-[0.25em];
-
-    &__tag {
-      @apply maz-my-[0.25em] maz-mr-[0.25em];
+    maz-overflow-hidden maz-rounded-lg maz-border-2 maz-bg-color;
 
-      &__icon {
-        @apply maz-h-[1.25em] maz-w-[1.25em];
+    padding-left: 0.25em;
+    padding-right: 0.25em;
 
-        margin-left: -0.25em;
-      }
+    &__tag {
+      margin-top: 0.25em;
+      margin-bottom: 0.25em;
+      margin-right: 0.25em;
     }
 
     &__input {
-      @apply maz-min-w-[7.5em];
+      &:deep(.m-input-wrapper) {
+        @apply maz-border-none;
+
+        min-width: 7.5em;
+      }
 
       &:deep(input) {
-        @apply maz-px-[0.4em];
+        padding-left: 0.4em;
+        padding-right: 0.4em;
       }
     }
   }
+
+  html.dark .m-input-tags {
+    @apply maz-bg-color-light;
+  }
 </style>

packages/lib/package/components/MazLazyImg.vue

@@ -63,7 +63,6 @@
 </script>
 
 <style lang="postcss" scoped>
-  /* stylelint-disable no-descending-specificity */
   .m-lazy-img-component {
     @apply maz-relative maz-inline-flex maz-bg-color-lighter maz-flex-center;
 

packages/lib/package/components/MazPicker/MazPickerCalendar.vue

@@ -113,7 +113,6 @@
 </script>
 
 <style lang="postcss" scoped>
-  /* stylelint-disable no-descending-specificity */
   .maz-picker-calendar {
     @apply maz-relative maz-flex maz-w-full;
 

packages/lib/package/components/MazPicker/MazPickerContainer.vue

@@ -128,7 +128,6 @@
 </script>
 
 <style lang="postcss" scoped>
-  /* stylelint-disable no-descending-specificity */
   .m-picker-container {
     @apply maz-overflow-hidden maz-rounded-lg maz-bg-color;
 

packages/lib/package/components/MazTabsBar.vue

@@ -116,7 +116,6 @@
 </script>
 
 <style lang="postcss" scoped>
-  /* stylelint-disable no-descending-specificity */
   .m-tabs-bar {
     @apply maz-relative maz-flex maz-space-x-1 maz-overflow-x-auto;
 

packages/lib/package/components/index.ts

@@ -18,6 +18,7 @@ import { default as MazIcon } from './MazIcon.vue'
 import { default as MazInput } from './MazInput.vue'
 import { default as MazInputNumber } from './MazInputNumber.vue'
 import { default as MazInputPrice } from './MazInputPrice.vue'
+import { default as MazInputTags } from './MazInputTags.vue'
 import { default as MazLazyImg } from './MazLazyImg.vue'
 import { default as MazPhoneNumberInput } from './MazPhoneNumberInput.vue'
 import { default as MazPicker } from './MazPicker.vue'
@@ -48,6 +49,7 @@ export {
   MazInput,
   MazInputNumber,
   MazInputPrice,
+  MazInputTags,
   MazLazyImg,
   MazPhoneNumberInput,
   MazPicker,
@@ -79,6 +81,7 @@ export default {
   MazInput,
   MazInputNumber,
   MazInputPrice,
+  MazInputTags,
   MazLazyImg,
   MazPhoneNumberInput,
   MazPicker,

packages/lib/package/components_tmp/NGallery/NGallery.vue

@@ -246,11 +246,9 @@
               @apply tw-transform tw-scale-110;
             }
 
-            /* stylelint-disable no-descending-specificity */
             img {
               @apply tw-transition tw-ease-in-out tw-duration-300;
             }
-            /* stylelint-enable no-descending-specificity */
           }
         }
       }

packages/lib/package/css/backdrop.css

@@ -1,4 +1,3 @@
-/* stylelint-disable no-descending-specificity */
 html.--backdrop-present {
   overflow-y: hidden;
   height: 100vh;

packages/lib/package/css/drawer.css

@@ -1,5 +1,3 @@
-/* stylelint-disable no-descending-specificity */
-
 .m-drawer {
   @apply maz-items-stretch maz-justify-end;
 

packages/lib/stylelint.config.js

@@ -12,5 +12,6 @@ module.exports = {
       { ignoreAtRules: ['screen', 'layer', 'tailwind', 'each'] },
     ],
     'selector-class-pattern': null,
+    'no-descending-specificity': null,
   },
 }