@indielayer/ui 1.12.0 → 1.13.0

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.12.0";
+declare const _default: "1.13.0";
 export default _default;

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -57,7 +57,7 @@
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "@vue/test-utils": "^2.4.0",
     "@vue/tsconfig": "^0.4.0",
-    "@vuepic/vue-datepicker": "^11.0.1",
+    "@vuepic/vue-datepicker": "^11.0.2",
     "@vueuse/core": "^11.1.0",
     "autoprefixer": "^10.4.0",
     "c8": "^7.12.0",

package/src/components/datepicker/Datepicker.vue

@@ -335,7 +335,7 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.dp__clear_icon {
+.dp--clear-btn {
   top: 2.75rem !important;
 }
 

package/src/components/modal/Modal.vue

@@ -143,6 +143,8 @@ const shouldIgnoreEvent = (event: KeyboardEvent) => {
       return Array.from(window.document.querySelectorAll(target))
         .some((el) => el === event.target || event.composedPath().includes(el))
     }
+
+    return false
   })
 }
 

package/src/components/select/Select.vue

@@ -12,6 +12,7 @@ const selectProps = {
   flat: Boolean,
   native: Boolean,
   filterable: Boolean,
+  clearable: Boolean,
   filterPlaceholder: {
     type: String,
     default: 'Filter by...',
@@ -42,7 +43,7 @@ export type SelectOption = {
 
 export type SelectProps = ExtractPublicPropTypes<typeof selectProps>
 
-type InternalClasses = 'wrapper' | 'box' | 'truncateCounter' | 'content' | 'search' | 'contentBody' | 'iconWrapper' | 'icon'
+type InternalClasses = 'wrapper' | 'box' | 'truncateCounter' | 'content' | 'search' | 'contentBody' | 'iconWrapper' | 'clearButton' | 'icon'
 type InternalExtraData = { errorInternal: Ref<boolean>; }
 export interface SelectTheme extends ThemeComponent<SelectProps, InternalClasses, InternalExtraData> {}
 
@@ -63,7 +64,7 @@ import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { useVirtualList } from '../../composables/useVirtualList'
-import { checkIcon, selectIcon } from '../../common/icons'
+import { checkIcon, selectIcon, closeIcon } from '../../common/icons'
 
 import XLabel from '../label/Label.vue'
 import XTag from '../tag/Tag.vue'
@@ -85,12 +86,14 @@ const elRef = ref<HTMLElement | null>(null)
 const labelRef = ref<InstanceType<typeof XLabel> | null>(null)
 const itemsRef = ref<InstanceType<typeof XMenuItem>[] | null>(null)
 const popoverRef = ref<InstanceType<typeof XPopover> | null>(null)
+const hiddenTagsCounterRef = ref<HTMLElement | null>(null)
 const selectedIndex = ref<number | undefined>()
 
 const filter = defineModel('filter', { default : '' })
 const filterRef = ref<InstanceType<typeof XInput> | null>(null)
 
 const isDisabled = computed(() => props.disabled || props.loading || props.readonly)
+const isClearIconVisible = computed(() => !props.loading && !props.readonly && !props.disabled && props.clearable && !isEmpty(selected.value))
 
 const selected = computed<any | any[]>({
   get() {
@@ -435,8 +438,10 @@ function calcMaxTags() {
 
     totalWidth += tag.offsetWidth
 
-    if (totalWidth < maxWidth) tagsCount++
-    else tag.style.display = 'none'
+    if (i > 0) {
+      if (totalWidth < maxWidth) tagsCount++
+      else tag.style.display = 'none'
+    }
   }
 
   return tagsCount
@@ -504,12 +509,13 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
                   }"
                 >
                   <x-tag
-                    v-for="value in selected"
+                    v-for="(value, valueIndex) 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"
+                    :style="{ 'max-width': valueIndex === 0 && hiddenTagsCounterRef ? `calc(100% - ${hiddenTagsCounterRef.offsetWidth + 6 + 'px'})` : undefined }"
                     @remove="(e: Event) => { handleRemove(e, value) }"
                   >
                     <template #prefix>
@@ -520,6 +526,7 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
 
                   <div
                     v-if="showCountTag"
+                    ref="hiddenTagsCounterRef"
                     :class="classes.truncateCounter"
                     @click.stop="multipleHiddenRef?.toggle()"
                   >+{{ hiddenTags }}</div>
@@ -638,17 +645,29 @@ defineExpose({ focus, blur, reset, validate, setError, filterRef })
         </template>
       </select>
 
+      <button
+        v-if="isClearIconVisible"
+        type="button"
+        aria-label="Clean value"
+        :class="classes.clearButton"
+        @click="reset"
+      >
+        <x-icon
+          :icon="closeIcon"
+          :class="[classes.icon, 'cursor-pointer']"
+        />
+      </button>
+
       <div v-if="!$slots.input" :class="classes.iconWrapper">
         <x-spinner v-if="loading" :size="size" />
         <slot v-else name="icon">
           <x-icon
             :icon="selectIcon"
-            :class="[classes.icon]"
+            :class="classes.icon"
           />
         </slot>
       </div>
     </div>
-
     <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </x-label>
 </template>

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

@@ -5,7 +5,7 @@ const theme: SelectTheme = {
     wrapper: '',
 
     box: ({ props, data }) => {
-      const classes = ['w-full border border-secondary-300 dark:border-secondary-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm']
+      const classes = ['w-full border border-secondary-300 dark:border-secondary-700 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm']
 
       if (!data.errorInternal && !props.disabled) classes.push('hover:border-secondary-400 dark:hover:border-secondary-500')
 
@@ -24,6 +24,16 @@ const theme: SelectTheme = {
         classes.push('group-focus:outline-[color:var(--x-select-border)]')
       }
 
+      if (!props.multiple && !props.multipleCheckbox) {
+        classes.push('truncate')
+      }
+
+      if (props.clearable) {
+        classes.push('pr-14')
+      } else {
+        classes.push('pr-8')
+      }
+
       return classes
     },
 
@@ -35,15 +45,16 @@ const theme: SelectTheme = {
 
     contentBody: 'overflow-y-auto max-h-64 min-w-[280px]',
 
-    iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
+    iconWrapper: 'absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none',
+
+    clearButton: 'absolute top-1/2 -translate-y-1/2 right-5 flex items-center p-2',
 
     icon: ({ props }) => {
-      const classes = ['']
+      const classes = []
 
       if (props.size === 'sm' || props.size === 'xs') classes.push('h-3 w-3')
-      else if (props.size === 'lg') classes.push('h-6 w-6')
-      else if (props.size === 'xl') classes.push('h-7 w-7')
-      else classes.push('h-5 w-5')
+      else if (props.size === 'lg' || props.size === 'xl') classes.push('h-5 w-5')
+      else classes.push('h-4 w-4')
 
       if (props.disabled) classes.push('text-secondary-300 dark:text-secondary-500')
       else classes.push('text-secondary-500 dark:text-secondary-400')

package/src/components/tab/theme/Tab.base.theme.ts

@@ -3,9 +3,10 @@ import type { TabTheme } from '../Tab.vue'
 const theme: TabTheme = {
   classes: {
     wrapper: ({ props, data }) => {
-      const c = ['py-2 transition-colors duration-150 ease-in-out whitespace-nowrap text-center']
+      const c = ['transition-colors duration-150 ease-in-out whitespace-nowrap text-center']
 
-      if (data.variant === 'block') c.push('px-8')
+      if (data.variant === 'line') c.push('py-2')
+      if (data.variant === 'block') c.push('py-1.5 px-8')
 
       if (props.size === 'xs') c.push('text-xs')
       else if (props.size === 'sm') c.push('text-sm')

package/src/components/tab/theme/TabGroup.base.theme.ts

@@ -8,7 +8,7 @@ const theme: TabGroupTheme = {
       const c = ['']
 
       if (!props.fullWidth) c.push('!w-fit')
-      if (props.variant === 'block') c.push('rounded-md')
+      if (props.variant === 'block') c.push('rounded-lg')
       if (props.variant === 'block' && !props.ghost) c.push('bg-secondary-100 dark:bg-secondary-800 p-1')
 
       return c

package/src/components/table/Table.vue

@@ -55,6 +55,7 @@ export type TableHeader = {
   width?: string | number;
   truncate?: boolean;
   skeletonShape?: SkeletonShape;
+  tooltip?: string;
 }
 
 export type TableProps = ExtractPublicPropTypes<typeof tableProps>
@@ -208,6 +209,7 @@ const { styles, classes, className } = useTheme('Table', {}, props)
             :sort="getSort(header.value, sort)"
             :sortable="header.sortable"
             :width="header.width"
+            :tooltip="header.tooltip"
             @click="header.sortable ? sortHeader(header) : null"
           >
             <slot :name="`header-${header.value}`" :header="header">

package/src/components/table/TableHeader.vue

@@ -15,6 +15,7 @@ const tableHeaderProps = {
     default: 'left',
     validator: (value: string) => validators.textAlign.includes(value as any),
   },
+  tooltip: String,
 }
 
 export type TableHeaderSort = typeof validators.sort[number]
@@ -30,6 +31,7 @@ export default { name: 'XTableHeader', validators }
 <script setup lang="ts">
 import type { ExtractPublicPropTypes, PropType } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import XToggleTip from '../tooltip/ToggleTip.vue'
 
 const props = defineProps(tableHeaderProps)
 
@@ -38,36 +40,42 @@ const { styles, classes, className } = useTheme('TableHeader', {}, props)
 
 <template>
   <th :style="styles" :class="[className, classes.th, 'group/th']">
-    <slot></slot>
+    <div class="flex items-center gap-1 select-none">
+      <slot></slot>
 
-    <svg
-      v-if="sortable"
-      :class="[
-        classes.sortIcon,
-        [sort && [1, -1].includes(sort) ? '' : 'invisible group-hover/th:visible']
-      ]"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-linejoin="round"
-      stroke-linecap="round"
-      fill="none"
-      role="presentation"
-    >
-      <template v-if="sort === -1">
-        <line x1="12" y1="5" x2="12" y2="19"/>
-        <polyline points="19 12 12 19 5 12" />
-      </template>
+      <x-toggle-tip v-if="tooltip" :content="tooltip"/>
 
-      <template v-else-if="sort === 1">
-        <line x1="12" y1="19" x2="12" y2="5"/>
-        <polyline points="5 12 12 5 19 12" />
-      </template>
+      <svg
+        v-if="sortable"
+        class="shrink-0"
+        :class="[
+          classes.sortIcon,
+          [sort && [1, -1].includes(sort) ? '' : 'invisible group-hover/th:visible'],
+          [sort !== -1 && sort !== 1 ? 'text-secondary-400' : 'text-primary-700']
+        ]"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill="none"
+        role="presentation"
+      >
+        <template v-if="sort === -1">
+          <line x1="12" y1="5" x2="12" y2="19"/>
+          <polyline points="19 12 12 19 5 12" />
+        </template>
 
-      <template v-else>
-        <path d="m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5"/>
-      </template>
-    </svg>
+        <template v-else-if="sort === 1">
+          <line x1="12" y1="19" x2="12" y2="5"/>
+          <polyline points="5 12 12 5 19 12" />
+        </template>
+
+        <template v-else>
+          <path d="m3 9l4-4l4 4M7 5v14m14-4l-4 4l-4-4m4 4V5"/>
+        </template>
+      </svg>
+    </div>
   </th>
 </template>

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

@@ -3,7 +3,7 @@ import type { TableHeadTheme } from '../TableHead.vue'
 const theme: TableHeadTheme = {
   classes: {
     thead: ({ props }) => {
-      const classes = ['align-bottom bg-secondary-50 dark:bg-secondary-700']
+      const classes = ['align-bottom bg-secondary-100 dark:bg-secondary-700']
 
       if (props.stickyHeader) classes.push('sticky top-0 z-10')
 

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

@@ -16,7 +16,7 @@ const theme: TableHeaderTheme = {
     },
 
     sortIcon: ({ props }) => {
-      const classes = ['absolute stroke-2 w-3 h-3 top-3.5 right-0.5']
+      const classes = ['stroke-2 w-3 h-3']
 
       return classes
     },

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

@@ -6,7 +6,7 @@ const theme: TableRowTheme = {
       const classes = []
 
       if (props.selected) {
-        classes.push('shadow-[inset_3px_0] shadow-primary-500')
+        classes.push('shadow-[inset_2px_0] shadow-primary-500')
       }
 
       if (props.striped) {

package/src/components/upload/Upload.vue

@@ -25,6 +25,10 @@ const uploadProps = {
     default: 'POST',
   },
   withCredentials: Boolean,
+  fileFormDataName: {
+    type: String,
+    default: 'file',
+  },
 }
 
 export type UploadFile = {
@@ -65,7 +69,7 @@ const props = defineProps(uploadProps)
 
 const emit = defineEmits([...useInputtable.emits(), 'upload', 'remove'])
 
-const elRef = ref<HTMLElement | null>(null)
+const elRef = ref<HTMLInputElement | null>(null)
 
 const isUploadMode = computed(() => !!props.action)
 
@@ -202,7 +206,7 @@ async function uploadFileRequest(uploadFile: UploadFile) {
       const xhr = new XMLHttpRequest()
       const formData = new FormData()
 
-      formData.append('file', uploadFile.file)
+      formData.append(props.fileFormDataName, uploadFile.file)
 
       xhr.open(props.method, props.action, true)
 
@@ -219,14 +223,12 @@ async function uploadFileRequest(uploadFile: UploadFile) {
           const percentComplete = (event.loaded / event.total) * 100
 
           uploadFile.progress = percentComplete
-
-          console.log(`Upload progress: ${percentComplete}%`)
         }
       })
 
       // Event listener when upload is complete
       xhr.addEventListener('load', () => {
-        if (xhr.status === 200) {
+        if (xhr.status >= 200 && xhr.status < 300) {
           uploadFile.completed = true
           try {
             uploadFile.response = JSON.parse(xhr.responseText)
@@ -267,13 +269,20 @@ async function upload() {
   validate(modelValue.value)
 }
 
+function reset() {
+  errorInternal.value = ''
+  isFirstValidation.value = true
+  modelValue.value = []
+
+  if (elRef.value) elRef.value.value = ''
+}
+
 const {
   errorInternal,
   hideFooterInternal,
   isInsideForm,
   inputListeners,
   isFirstValidation,
-  reset,
   validate,
   setError,
 } = useInputtable(props, { focus, emit })

package/src/version.ts

@@ -1 +1 @@
-export default '1.12.0'
+export default '1.13.0'