@indielayer/ui 1.8.1 → 1.8.2

package/lib/version.d.ts

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

package/lib/version.js

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

package/package.json

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

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>

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/version.ts

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