@indielayer/ui 1.6.1 → 1.6.3

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.6.1";
+declare const _default: "1.6.3";
 export default _default;

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -64,6 +64,7 @@
     "clean-css": "^5.3.0",
     "eslint": "^8.43.0",
     "floating-vue": "^5.2.2",
+    "fuse.js": "^7.0.0",
     "jsdom": "^22.1.0",
     "postcss": "^8.4.4",
     "rollup-plugin-visualizer": "^5.9.2",
@@ -98,13 +99,14 @@
     "dev": "vite dev --mode docs",
     "build": "pnpm generate && vite build",
     "build:docs": "pnpm build --mode docs",
-    "build:prod": "pnpm build && pnpm gen-types",
+    "build:prod": "pnpm build && pnpm gen:types",
     "build:watch": "pnpm generate && vite build --watch",
     "build:only": "vite build",
     "build:stats": "VITE_VISUALIZER=Y npm run build",
-    "generate": "pnpm gen-version",
-    "gen-types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
-    "gen-version": "node .scripts/gen-version.cjs",
+    "generate": "pnpm gen:version",
+    "gen:types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
+    "gen:version": "node .scripts/gen-version.cjs",
+    "gen:search": "node .scripts/gen-search.cjs",
     "test": "pnpm test:unit",
     "test:unit": "vitest --environment jsdom",
     "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",

package/src/components/button/theme/Button.base.theme.ts

@@ -12,8 +12,8 @@ const theme: ButtonTheme = {
       if (!props.flat && !props.light && !props.ghost && !props.disabled && !props.loading) classes.push('shadow-sm')
 
       // size
-      if (props.size === 'xs') classes.push(slots.default ? `py-1 text-xs ${props.icon ? 'px-2' : 'px-3'}` : 'leading-none p-1')
-      else if (props.size === 'sm') classes.push(slots.default ? `py-2 text-sm ${props.icon ? 'px-3' : 'px-4'}` : 'leading-none p-2')
+      if (props.size === 'xs') classes.push(slots.default ? `py-1 text-xs ${props.icon ? 'px-2' : 'px-2'}` : 'leading-none p-1')
+      else if (props.size === 'sm') classes.push(slots.default ? `py-1.5 text-sm ${props.icon ? 'px-3' : 'px-3'}` : 'leading-none p-1.5')
       else if (props.size === 'lg') classes.push(slots.default ? `py-3 text-lg ${props.icon ? 'px-4' : 'px-6'}` : 'leading-none p-3')
       else if (props.size === 'xl') classes.push(slots.default ? `py-4 text-xl ${props.icon ? 'px-6' : 'px-6'}` : 'leading-none p-4')
       else classes.push(slots.default ? `py-2 ${props.icon ? 'px-4' : 'px-5'}` : 'leading-none p-2')

package/src/components/card/theme/Card.base.theme.ts

@@ -2,7 +2,7 @@ import type { CardTheme } from '../Card.vue'
 
 const theme: CardTheme = {
   classes: {
-    wrapper: ({ props }) => `bg-slate-50 dark:bg-slate-800 rounded-md ${props.flat ? '' : 'shadow'}`,
+    wrapper: ({ props }) => `bg-white dark:bg-secondary-800 overflow-hidden rounded-md ${props.flat ? '' : 'shadow'}`,
   },
 }
 

package/src/components/form/Form.vue

@@ -145,7 +145,7 @@ const { styles, classes, className } = useTheme('Form', {}, props)
       </div>
     </slot>
 
-    <fieldset :disabled="disabled" :class="classes.content">
+    <fieldset :disabled="disabled" :class="classes.content" class="contents">
       <slot></slot>
     </fieldset>
 

package/src/components/input/Input.vue

@@ -119,9 +119,9 @@ defineExpose({ focus, blur, reset, validate, setError })
     <div class="relative">
       <slot name="prefix">
         <x-icon
-          v-if="iconLeft"
+          v-if="iconLeft || icon"
           :size="size"
-          :icon="iconLeft"
+          :icon="iconLeft || icon"
           class="ml-2 left-1"
           :class="classes.icon"
         />
@@ -152,8 +152,7 @@ defineExpose({ focus, blur, reset, validate, setError })
         :placeholder="placeholder"
         :readonly="readonly"
         :type="currentType"
-        :value="modelValue || ''"
-        v-bind="$attrs"
+        :value="typeof modelValue !== 'undefined' ? modelValue : ''"
         v-on="inputListeners"
         @change="onChange"
       />

package/src/components/input/theme/Input.base.theme.ts

@@ -10,7 +10,7 @@ const theme: InputTheme = {
       if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
-      else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
+      else if (props.size === 'sm') classes.push('px-2 py-1.5 text-sm')
       else if (props.size === 'lg') classes.push('px-4 py-3 text-lg')
       else if (props.size === 'xl') classes.push('px-5 py-4 text-xl')
       else classes.push('px-3 py-2')

package/src/components/modal/Modal.vue

@@ -1,13 +1,21 @@
 <script lang="ts">
 const modalSize = ['xs', 'sm', 'md', 'lg', 'xl', 'full'] as const
+const modalPosition = ['top', 'center', 'bottom'] as const
 const modalProps = {
   size: {
     type: String as PropType<ModalSize>,
     default: 'xl',
   },
+  position: {
+    type: String as PropType<ModalPosition>,
+    default: 'center',
+  },
   modelValue: Boolean,
   showClose: Boolean,
-  backdrop: Boolean,
+  backdrop: {
+    type: Boolean,
+    default: true,
+  },
   hasActions: {
     type: Boolean,
     default: true,
@@ -40,9 +48,10 @@ const modalProps = {
 }
 
 export type ModalSize = typeof modalSize[number]
+export type ModalPosition = typeof modalPosition[number]
 export type ModalProps = ExtractPublicPropTypes<typeof modalProps>
 
-type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'closeIcon' | 'header' | 'content' | 'actions' | 'title' | 'description' | 'label'
+type InternalClasses = 'wrapper' | 'backdrop' | 'modal' | 'modalWrapper' | 'closeIcon' | 'header' | 'content' | 'actions' | 'title' | 'description' | 'label'
 type InternaData = {
   visible: boolean;
 }
@@ -52,6 +61,7 @@ export default {
   name: 'XModal',
   validators: {
     size: modalSize,
+    position: modalPosition,
   },
 }
 </script>
@@ -174,10 +184,11 @@ defineExpose({ open, close })
         :class="classes.backdrop"
       ></div>
 
-      <div class="flex items-end sm:items-center justify-center p-4 sm:p-6 h-screen">
+      <div :class="classes.modalWrapper">
         <component
           :is="isForm ? XForm : 'div'"
           ref="modalRef"
+          class="max-h-full"
           :disabled="formDisabled"
           :auto-validate="formAutoValidate"
           :title="formTitle"
@@ -192,12 +203,14 @@ defineExpose({ open, close })
           @submit="(isValid: boolean) => $emit('submit', isValid)"
         >
           <slot name="image"></slot>
-          <div v-if="hasHeader" :class="classes.header">
-            <slot name="header">
-              <div v-if="label" :class="classes.label">{{ label }}</div>
-              <div v-if="title" :class="classes.title">{{ title }}</div>
-            </slot>
-          </div>
+          <slot name="header">
+            <div v-if="hasHeader" :class="classes.header">
+              <slot name="header-content">
+                <div v-if="label" :class="classes.label">{{ label }}</div>
+                <div v-if="title" :class="classes.title">{{ title }}</div>
+              </slot>
+            </div>
+          </slot>
           <x-scroll
             v-if="$slots.default"
             :scrollbar="false"
@@ -217,15 +230,17 @@ defineExpose({ open, close })
             :class="classes.closeIcon"
             @click="close"
           />
-          <div v-if="hasActions" :class="classes.actions">
-            <slot name="actions">
-              <slot name="cancel-action"></slot>
-              <div v-if="hasPlaceholder"></div>
-              <slot name="tertiary-action"></slot>
-              <slot name="secondary-action"></slot>
-              <slot name="primary-action"></slot>
-            </slot>
-          </div>
+          <slot name="footer">
+            <div v-if="hasActions" :class="classes.actions">
+              <slot name="actions">
+                <slot name="cancel-action"></slot>
+                <div v-if="hasPlaceholder"></div>
+                <slot name="tertiary-action"></slot>
+                <slot name="secondary-action"></slot>
+                <slot name="primary-action"></slot>
+              </slot>
+            </div>
+          </slot>
         </component>
       </div>
     </div>

package/src/components/modal/theme/Modal.base.theme.ts

@@ -13,6 +13,16 @@ const theme: ModalTheme = {
       return classes
     },
 
+    modalWrapper: ({ props }) => {
+      const classes = ['flex justify-center p-4 sm:p-8 md:py-20 h-screen']
+
+      if (props.position === 'top') classes.push('items-start')
+      else if (props.position === 'bottom') classes.push('items-end')
+      else classes.push('items-end sm:items-center')
+
+      return classes
+    },
+
     modal: ({ props, data }) => {
       const classes = ['relative flex flex-col z-10 bg-white dark:bg-secondary-900 rounded-md shadow-lg transform transition-all overflow-hidden max-h-full w-full']
 

package/src/components/notifications/theme/Notifications.base.theme.ts

@@ -2,7 +2,7 @@ import type { NotificationsTheme } from '../Notifications.vue'
 
 const theme: NotificationsTheme = {
   classes: {
-    wrapper: 'fixed z-50 w-full sm:w-auto overflow-y-auto max-h-screen',
+    wrapper: 'fixed z-50 w-full sm:w-auto max-h-screen',
 
     list: 'flex flex-col items-end w-full sm:w-[520px] px-4',
 

package/src/components/select/theme/Select.base.theme.ts

@@ -10,7 +10,7 @@ const theme: SelectTheme = {
       if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
-      else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
+      else if (props.size === 'sm') classes.push('px-2 py-1.5 text-sm')
       else if (props.size === 'lg') classes.push('px-4 py-3 text-lg')
       else if (props.size === 'xl') classes.push('px-5 py-4 text-xl')
       else classes.push('px-3 py-2')

package/src/components/table/Table.vue

@@ -252,7 +252,7 @@ const { styles, classes, className } = useTheme('Table', {}, props)
               </slot>
             </x-table-cell>
           </x-table-row>
-          <tr v-if="expandable">
+          <tr v-if="expandable" :class="{ 'hidden': !internalItems[index]?.__expanded }">
             <td colspan="999">
               <div class="overflow-hidden transition-opacity" :class="[internalItems[index]?.__expanded ? '' : 'opacity-0 max-h-0']">
                 <slot name="expanded-row" :item="item"></slot>

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

@@ -3,7 +3,7 @@ import type { TableCellTheme } from '../TableCell.vue'
 const theme: TableCellTheme = {
   classes: {
     wrapper: ({ props }) => {
-      const c = ['last:pr-0 px-3']
+      const c = ['px-3']
 
       c.push(props.dense ? 'py-2' : 'py-4')
 

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

@@ -2,8 +2,8 @@ import type { TableHeadTheme } from '../TableHead.vue'
 
 const theme: TableHeadTheme = {
   classes: {
-    thead: 'align-bottom',
-    row: 'text-sm text-secondary-600 dark:text-secondary-400 border-b',
+    thead: 'align-bottom bg-secondary-50 dark:bg-secondary-700',
+    row: 'text-sm text-secondary-600 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-2 font-semibold tracking-widest uppercase text-xs px-3']
+      const classes = ['relative py-3 font-semibold text-xs px-3']
 
       if (props.sortable) classes.push('cursor-pointer hover:text-secondary-800 dark:hover:text-secondary-300 transition-colors duration-150 ease-in-out')
 
@@ -18,7 +18,7 @@ const theme: TableHeaderTheme = {
     },
 
     sortIcon: ({ props }) => {
-      const classes = ['absolute stroke-2 w-3 h-3 top-2.5 right-0.5']
+      const classes = ['absolute stroke-2 w-3 h-3 top-3.5 right-0.5']
 
       return classes
     },

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

@@ -6,7 +6,7 @@ const theme: TableRowTheme = {
       const classes = []
 
       if (props.striped) {
-        classes.push('odd:bg-secondary-50 dark:odd:bg-secondary-800')
+        classes.push('even:bg-secondary-50 dark:even:bg-secondary-700')
       } else {
         classes.push('border-b border-secondary-200 dark:border-secondary-700')
       }

package/src/components/textarea/Textarea.vue

@@ -138,7 +138,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       :name="name"
       :placeholder="placeholder"
       :readonly="readonly"
-      :value="modelValue ? String(modelValue) : ''"
+      :value="typeof modelValue !== 'undefined' ? String(modelValue) : ''"
       v-on="inputListeners"
       @keydown.enter="onEnter"
       @input="onInput"

package/src/components/textarea/theme/Textarea.base.theme.ts

@@ -11,7 +11,7 @@ const theme: TextareaTheme = {
       if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
       if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
-      else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
+      else if (props.size === 'sm') classes.push('px-2 py-1.5 text-sm')
       else if (props.size === 'lg') classes.push('px-4 py-3 text-lg')
       else if (props.size === 'xl') classes.push('px-5 py-4 text-xl')
       else classes.push('px-3 py-2')

package/src/composables/useFocusTrap.ts

@@ -64,29 +64,6 @@ export function useFocusTrap() {
         lastEl?.focus()
       }
 
-    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
-      event.preventDefault()
-      const currentEl = document.activeElement as HTMLElement
-      const index = focusable.indexOf(currentEl)
-      const previousEl = focusable[index - 1]
-
-      if (previousEl) {
-        previousEl.focus()
-      } else if (lastFocusableEl) {
-        lastFocusableEl.focus()
-      }
-
-    } else if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
-      event.preventDefault()
-      const currentEl = document.activeElement as HTMLElement
-      const index = focusable.indexOf(currentEl)
-      const nextElement = focusable[index + 1]
-
-      if (nextElement) {
-        nextElement.focus()
-      } else if (firstFocusableEl) {
-        firstFocusableEl.focus()
-      }
     }
   }
 

package/src/composables/useInputtable.ts

@@ -103,6 +103,7 @@ export const useInputtable = (props: any, { focus, emit, withListeners = true }:
       input: (event: Event) => {
         if (props.validateOnInput && !isFirstValidation.value) validate((event.target as HTMLInputElement).value)
         emit('update:modelValue', (event.target as HTMLInputElement).value)
+        emit('input', event)
       },
       change: (event: Event) => emit('change', event),
     }
@@ -152,7 +153,10 @@ useInputtable.emits = (withListeners = true): string[] => {
 }
 
 useInputtable.props = () => ({
-  modelValue: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | any[] | undefined>,
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | any[] | undefined>,
+    default: undefined,
+  },
   id: String,
   name: String,
   readonly: Boolean,

package/src/version.ts

@@ -1 +1 @@
-export default '1.6.1'
+export default '1.6.3'