@indielayer/ui 1.8.0 → 1.8.2

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.8.0";
+declare const _default: "1.8.2";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "1.8.0";
+const e = "1.8.2";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",

package/src/components/modal/Modal.vue

@@ -67,7 +67,7 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type PropType, type ExtractPublicPropTypes, computed, nextTick, onMounted } from 'vue'
+import { ref, watch, type PropType, type ExtractPublicPropTypes, computed, nextTick } from 'vue'
 import { onClickOutside, useEventListener } from '@vueuse/core'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useFocusTrap } from '../../composables/useFocusTrap'
@@ -132,8 +132,17 @@ async function checkVisibiliy() {
 
 if (typeof window !== 'undefined') useEventListener(document, 'keydown', onKeyDown)
 
+const shouldIgnoreEvent = (event: KeyboardEvent) => {
+  return ['.v-popper__popper', '.x-datepicker'].some((target) => {
+    if (typeof target === 'string') {
+      return Array.from(window.document.querySelectorAll(target))
+        .some((el) => el === event.target || event.composedPath().includes(el))
+    }
+  })
+}
+
 function onKeyDown(event: KeyboardEvent) {
-  if (event.key === 'Escape' && value.value && !props.persistent) close()
+  if (event.key === 'Escape' && !shouldIgnoreEvent(event) && value.value && !props.persistent) close()
 }
 
 function clickOutsideCallback() {

package/src/components/select/Select.vue

@@ -69,6 +69,8 @@ const selectedIndex = ref<number | undefined>()
 const filter = ref('')
 const filterRef = ref<InstanceType<typeof XInput> | null>(null)
 
+const isDisabled = computed(() => props.disabled || props.loading || props.readonly)
+
 const selected = computed<any | any[]>({
   get() {
     if (props.multiple) {
@@ -239,6 +241,8 @@ function isEmpty(value: string | number | []) {
 function handleRemove(e: Event, value: string) {
   e.stopPropagation()
 
+  if (isDisabled.value) return
+
   // find value in selected and remove it
   const index = selected.value.indexOf(value)
 
@@ -355,7 +359,7 @@ defineExpose({ focus, blur, reset, validate, setError })
     tabindex="0"
     class="group"
     :style="styles"
-    :disabled="disabled"
+    :disabled="isDisabled"
     :required="required"
     :is-inside-form="isInsideForm"
     :label="label"
@@ -368,26 +372,11 @@ defineExpose({ focus, blur, reset, validate, setError })
   >
     <div class="relative">
       <div v-if="native && !multiple" :class="classes.box" @click="elRef?.click()">
-        <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
-          <div class="flex gap-1 flex-wrap">
-            <x-tag
-              v-for="value in selected"
-              :key="value"
-              size="xs"
-              outlined
-              removable
-              @remove="(e: Event) => { handleRemove(e, value) }"
-            >{{ getLabel(value) }}</x-tag>
-          </div>
-        </template>
-        <template v-else-if="!multiple && !isEmpty(selected)">
+        <template v-if="!isEmpty(selected)">
           {{ getLabel(selected) }}
         </template>
         <template v-else>
-          <div
-            v-if="placeholder"
-            class="text-secondary-400 dark:text-secondary-500"
-          >
+          <div v-if="placeholder" class="text-secondary-400 dark:text-secondary-500">
             {{ placeholder }}
           </div>
           <div v-else>&nbsp;</div>
@@ -396,7 +385,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       <x-popover
         v-else
         ref="popoverRef"
-        :disabled="disabled || loading || readonly"
+        :disabled="isDisabled"
       >
         <div
           :class="[classes.box]"
@@ -407,8 +396,9 @@ defineExpose({ focus, blur, reset, validate, setError })
                 v-for="value in selected"
                 :key="value"
                 size="xs"
-                outlined
                 removable
+                :outlined="!(isDisabled || options?.find((i) => i.value === value)?.disabled)"
+                :disabled="isDisabled || options?.find((i) => i.value === value)?.disabled"
                 @remove="(e: Event) => { handleRemove(e, value) }"
               >{{ getLabel(value) }}</x-tag>
             </div>
@@ -432,7 +422,13 @@ defineExpose({ focus, blur, reset, validate, setError })
           <x-popover-container :class="classes.content">
             <slot name="content-header">
               <div v-if="filterable" :class="classes.search">
-                <x-input ref="filterRef" v-model="filter" :placeholder="filterPlaceholder" size="sm"/>
+                <x-input
+                  ref="filterRef"
+                  v-model="filter"
+                  :placeholder="filterPlaceholder"
+                  skip-form-registry
+                  size="sm"
+                />
               </div>
             </slot>
             <div v-if="internalOptions.length > 0" :class="classes.contentBody">

package/src/components/tag/Tag.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 const tagProps = {
   ...useCommon.props(),
-  ...useColors.props('gray'),
+  ...useColors.props('slate'),
   tag: {
     type: String,
     default: 'span',
@@ -9,6 +9,7 @@ const tagProps = {
   rounded: Boolean,
   removable: Boolean,
   outlined: Boolean,
+  disabled: Boolean,
 }
 
 export type TagProps = ExtractPublicPropTypes<typeof tagProps>
@@ -52,13 +53,15 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
 <template>
   <component
     :is="tag"
-    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]"
+    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border"
     :style="styles"
     :class="
       [
         className,
         classes.wrapper,
-        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]',
+        outlined ?
+          'border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]' :
+          'border-transparent bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]',
         rounded ? 'rounded-full' : 'rounded'
       ]"
   >
@@ -70,8 +73,9 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
       <x-icon
         :size="closeIconSize"
         :icon="closeIcon"
-        class="ml-1.5 cursor-pointer hover:text-secondary-700 transition-colors duration-150"
-        @click="(e: Event) => $emit('remove', e)"
+        class="ml-1.5 -mt-0.5 cursor-pointer transition-colors duration-150"
+        :class="[disabled ? 'text-secondary-400' : 'hover:text-secondary-500']"
+        @click="(e: Event) => !disabled && $emit('remove', e)"
       />
     </span>
 

package/src/components/tag/theme/Tag.base.theme.ts

@@ -3,13 +3,13 @@ import type { TagTheme } from '../Tag.vue'
 const theme: TagTheme = {
   classes: {
     wrapper: ({ props }) => {
-      let c = 'inline-flex items-center leading-none max-w-full'
+      let c = 'inline-flex leading-tight max-w-full'
 
-      if (props.size === 'xs') c += ' px-2 py-1 text-xs'
-      else if (props.size === 'sm') c += ' px-2 py-1 text-sm'
-      else if (props.size === 'lg') c += ' px-4 py-3 text-lg'
-      else if (props.size === 'xl') c += ' px-6 py-6 text-xl'
-      else c += ' px-3 py-2'
+      if (props.size === 'xs') c += ' px-2 py-0.5 text-xs'
+      else if (props.size === 'sm') c += ' px-2 py-0.5 text-sm'
+      else if (props.size === 'lg') c += ' px-4 py-2 text-lg'
+      else if (props.size === 'xl') c += ' px-5 py-3 text-xl'
+      else c += ' px-3 py-1.5'
 
       return c
     },

package/src/components/tag/theme/Tag.carbon.theme.ts

@@ -3,7 +3,7 @@ import type { TagTheme } from '../Tag.vue'
 const theme: TagTheme = {
   classes: {
     wrapper: ({ props }) => {
-      let c = 'inline-flex items-center leading-none max-w-full '
+      let c = 'inline-flex leading-tight max-w-full '
 
       if (props.size === 'xs' || props.size === 'sm') c += ' px-2 py-0.5 text-xs'
       else if (props.size === 'lg') c += ' px-4 py-3'

package/src/composables/useInputtable.ts

@@ -118,7 +118,8 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
     if (formGroup.isInsideFormGroup) {
       formGroup.registerInputGroup(nameInternal.value, focus)
     } else {
-      form.registerInput(nameInternal.value, focus, validate, setError)
+      if (!props.skipFormRegistry)
+        form.registerInput(nameInternal.value, focus, validate, setError)
     }
   })
 
@@ -126,7 +127,8 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
     if (formGroup.isInsideFormGroup) {
       formGroup.unregisterInputGroup(nameInternal.value)
     } else {
-      form.unregisterInput(nameInternal.value)
+      if (!props.skipFormRegistry)
+        form.unregisterInput(nameInternal.value)
     }
 
   })
@@ -136,7 +138,7 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
     errorInternal,
     hideFooterInternal,
     isFocused,
-    isInsideForm: form.isInsideForm,
+    isInsideForm: props.skipFormRegistry ? false : form.isInsideForm,
     isInsideFormGroup: formGroup.isInsideFormGroup,
     inputListeners,
     formGroup,
@@ -174,4 +176,5 @@ useInputtable.props = () => ({
     default: () => [],
   },
   tooltip: String,
+  skipFormRegistry: Boolean,
 } as const)

package/src/version.ts

@@ -1 +1 @@
-export default '1.8.0'
+export default '1.8.2'