@indielayer/ui 1.10.0 → 1.10.2

package/src/components/datepicker/theme/Datepicker.base.theme.ts

@@ -11,8 +11,6 @@ const theme: DatepickerTheme = {
     const vars: Array<Record<string, string> | string> = [`
     /*General*/
     --dp-font-family: var(--font-family-sans);
-    --dp-border-radius: 8px; /*Configurable border-radius*/
-    --dp-cell-border-radius: 8px; /*Specific border radius for the calendar cell*/
     --dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
 
     /*Sizing*/
@@ -36,7 +34,7 @@ const theme: DatepickerTheme = {
 
     /*Font sizes*/
     --dp-font-size: 0.875rem; /*Default font-size*/
-    --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
+    --dp-preview-font-size: 0.875rem; /*Font size of the date preview in the action row*/
     --dp-time-font-size: 0.8rem; /*Font size in the time picker*/
 
     /*Transitions*/
@@ -48,19 +46,19 @@ const theme: DatepickerTheme = {
     vars.push(css.variables({
       bg: '#fff',
       text: secondary[800],
-      disabled: secondary[800],
-      range: secondary[200],
+      disabled: secondary[300],
+      range: primary[100],
       icon: secondary[500],
       primary: primary[500],
       border: secondary[100],
       dark: {
         bg: secondary[800],
         text: secondary[100],
-        disabled: secondary[700],
-        range: secondary[600],
+        disabled: secondary[600],
+        range: primary[900],
         icon: secondary[200],
         primary: primary[500],
-        border: secondary[700],
+        border: secondary[800],
       },
     }))
 

package/src/components/select/Select.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 const selectProps = {
-  ...useColors.props('primary'),
+  ...useColors.props('secondary'),
   ...useCommon.props(),
   ...useInteractive.props(),
   ...useInputtable.props(),
@@ -469,49 +469,55 @@ defineExpose({ focus, blur, reset, validate, setError })
           ref="popoverRef"
           :disabled="isDisabled"
         >
-          <div
-            :class="[classes.box]"
+          <slot
+            name="input"
+            :popover="popoverRef"
+            :selected="selected"
+            :disabled="isDisabled"
+            :label="getLabel(selected)"
           >
-            <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
-              <div
-                ref="tagsRef"
-                class="flex gap-1 relative"
-                :class="{
-                  'flex-wrap': !truncate,
-                  'overflow-hidden': truncate,
-                }"
-              >
-                <x-tag
-                  v-for="value in selected"
-                  :key="value"
-                  size="xs"
-                  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 :class="[classes.box]">
+              <template v-if="multiple && Array.isArray(selected) && selected.length > 0">
+                <div
+                  ref="tagsRef"
+                  class="flex gap-1 relative"
+                  :class="{
+                    'flex-wrap': !truncate,
+                    'overflow-hidden': truncate,
+                  }"
+                >
+                  <x-tag
+                    v-for="value in selected"
+                    :key="value"
+                    size="xs"
+                    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
+                    v-if="showCountTag"
+                    :class="classes.truncateCounter"
+                    @click.stop="multipleHiddenRef?.toggle()"
+                  >+{{ hiddenTags }}</div>
+                </div>
+              </template>
+              <template v-else-if="!multiple && !isEmpty(selected)">
+                {{ getLabel(selected) }}
+              </template>
 
+              <template v-else>
                 <div
-                  v-if="showCountTag"
-                  :class="classes.truncateCounter"
-                  @click.stop="multipleHiddenRef?.toggle()"
-                >+{{ hiddenTags }}</div>
-              </div>
-            </template>
-            <template v-else-if="!multiple && !isEmpty(selected)">
-              {{ getLabel(selected) }}
-            </template>
-
-            <template v-else>
-              <div
-                v-if="placeholder"
-                class="text-secondary-400 dark:text-secondary-500"
-              >
-                {{ placeholder }}
-              </div>
-              <div v-else>&nbsp;</div>
-            </template>
-          </div>
+                  v-if="placeholder"
+                  class="text-secondary-400 dark:text-secondary-500"
+                >
+                  {{ placeholder }}
+                </div>
+                <div v-else>&nbsp;</div>
+              </template>
+            </div>
+          </slot>
 
           <template #content>
             <x-popover-container
@@ -529,7 +535,7 @@ defineExpose({ focus, blur, reset, validate, setError })
                 </div>
               </slot>
               <div v-bind="containerProps" :class="classes.contentBody">
-                <div v-bind="wrapperProps">
+                <div v-bind="wrapperProps" class="space-y-0.5">
                   <x-menu-item
                     v-for="item in list"
                     :key="item.index"
@@ -542,9 +548,9 @@ defineExpose({ focus, blur, reset, validate, setError })
                     filled
                     @click="() => !multiple && popoverRef?.hide()"
                   >
-                    <template #prefix><slot name="prefix" :item="item.data">{{ item.data.prefix }}</slot></template>
+                    <template v-if="$slots.prefix || item.data.prefix" #prefix><slot name="prefix" :item="item.data">{{ item.data.prefix }}</slot></template>
                     <slot name="label" :item="item.data"></slot>
-                    <template #suffix><slot name="suffix" :item="item.data">{{ item.data.suffix }}</slot></template>
+                    <template v-if="$slots.suffix || item.data.suffix" #suffix><slot name="suffix" :item="item.data">{{ item.data.suffix }}</slot></template>
                   </x-menu-item>
                 </div>
                 <div v-if="list.length === 0" class="p-2 text-center text-secondary-400">

package/src/components/table/theme/TableHead.base.theme.ts

@@ -9,7 +9,7 @@ const theme: TableHeadTheme = {
 
       return classes
     },
-    row: 'text-sm text-secondary-600 dark:text-secondary-200 border-b',
+    row: 'text-sm text-secondary-700 dark:text-secondary-200 border-b',
   },
 }
 

package/src/components/table/theme/TableHeader.base.theme.ts

@@ -3,7 +3,7 @@ import type { TableHeaderTheme } from '../TableHeader.vue'
 const theme: TableHeaderTheme = {
   classes: {
     th: ({ props }) => {
-      const classes = ['relative py-3 font-semibold text-xs px-3']
+      const classes = ['relative p-2.5 font-medium']
 
       if (props.sortable) classes.push('cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out')
 

package/src/components/tag/Tag.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 const tagProps = {
   ...useCommon.props(),
-  ...useColors.props('slate'),
+  ...useColors.props('secondary'),
   tag: {
     type: String,
     default: 'span',
@@ -9,6 +9,7 @@ const tagProps = {
   rounded: Boolean,
   removable: Boolean,
   outlined: Boolean,
+  filled: Boolean,
   disabled: Boolean,
 }
 
@@ -61,7 +62,7 @@ const { styles, classes, className } = useTheme('Tag', {}, props)
         classes.wrapper,
         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)]',
+          '!border-transparent bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]',
         rounded ? 'rounded-full' : 'rounded'
       ]"
   >

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

@@ -3,13 +3,24 @@ import type { TagTheme } from '../Tag.vue'
 const theme: TagTheme = {
   classes: {
     wrapper: ({ props }) => {
-      let c = 'inline-flex leading-tight max-w-full'
+      const c = ['inline-flex leading-tight max-w-full']
 
-      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'
+      if (props.size === 'xs') c.push('px-2 py-0.5 text-xs')
+      else if (props.size === 'sm') c.push(' px-2 py-0.5 text-sm')
+      else if (props.size === 'lg') c.push(' px-4 py-2 text-lg')
+      else if (props.size === 'xl') c.push(' px-5 py-3 text-xl')
+      else c.push(' px-3 py-1.5')
+
+      if (props.outlined) {
+        c.push('border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]')
+      }
+
+      if (props.filled || !props.outlined) {
+        if (props.filled) c.push('bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]')
+      }
+
+      if (props.rounded) c.push('rounded-full')
+      else c.push('rounded-md')
 
       return c
     },
@@ -19,13 +30,13 @@ const theme: TagTheme = {
     const color = colors.getPalette(props.color)
 
     return css.variables({
-      bg: color[200],
-      text: color[800],
-      border: color[800],
+      bg: color[100],
+      text: color[600],
+      border: color[600],
       dark: {
-        bg: color[800],
+        bg: color[600],
         border: color[400],
-        text: props.outlined ? color[200] : color[100],
+        text: color[100],
       },
     })
   },

package/src/composables/index.ts

@@ -2,6 +2,7 @@ export * from './keys'
 export * from './useCommon'
 export * from './useColors'
 export * from './useCSS'
+export * from './useFocusTrap'
 export * from './useInputtable'
 export * from './useInteractive'
 export * from './useNotifications'

package/src/version.ts

@@ -1 +1 @@
-export default '1.10.0'
+export default '1.10.2'