@indielayer/ui 1.9.3 → 1.10.1

package/lib/themes/carbon/components.js

@@ -16,11 +16,11 @@ import { default as L } from "../../components/divider/theme/Divider.carbon.them
 import { default as w } from "../../components/drawer/theme/Drawer.carbon.theme.js";
 import { default as R } from "../../components/form/theme/Form.carbon.theme.js";
 import { default as N } from "../../components/formGroup/theme/FormGroup.carbon.theme.js";
-import { default as j } from "../../components/icon/theme/Icon.carbon.theme.js";
-import { default as y } from "../../components/image/theme/Image.carbon.theme.js";
-import { default as E } from "../../components/input/theme/Input.carbon.theme.js";
-import { default as K } from "../../components/inputFooter/theme/InputFooter.carbon.theme.js";
-import { default as U } from "../../components/label/theme/Label.carbon.theme.js";
+import { default as U } from "../../components/icon/theme/Icon.carbon.theme.js";
+import { default as q } from "../../components/image/theme/Image.carbon.theme.js";
+import { default as z } from "../../components/input/theme/Input.carbon.theme.js";
+import { default as J } from "../../components/inputFooter/theme/InputFooter.carbon.theme.js";
+import { default as O } from "../../components/label/theme/Label.carbon.theme.js";
 import { default as W } from "../../components/link/theme/Link.carbon.theme.js";
 import { default as Y } from "../../components/loader/theme/Loader.carbon.theme.js";
 import { default as _ } from "../../components/menu/theme/Menu.carbon.theme.js";
@@ -43,12 +43,13 @@ import { default as Le } from "../../components/tab/theme/Tab.carbon.theme.js";
 import { default as we } from "../../components/tab/theme/TabGroup.carbon.theme.js";
 import { default as Re } from "../../components/table/theme/Table.carbon.theme.js";
 import { default as Ne } from "../../components/table/theme/TableCell.carbon.theme.js";
-import { default as je } from "../../components/table/theme/TableHead.carbon.theme.js";
-import { default as ye } from "../../components/table/theme/TableHeader.carbon.theme.js";
-import { default as Ee } from "../../components/table/theme/TableRow.carbon.theme.js";
-import { default as Ke } from "../../components/tag/theme/Tag.carbon.theme.js";
-import { default as Ue } from "../../components/textarea/theme/Textarea.carbon.theme.js";
+import { default as Ue } from "../../components/table/theme/TableHead.carbon.theme.js";
+import { default as qe } from "../../components/table/theme/TableHeader.carbon.theme.js";
+import { default as ze } from "../../components/table/theme/TableRow.carbon.theme.js";
+import { default as Je } from "../../components/tag/theme/Tag.carbon.theme.js";
+import { default as Oe } from "../../components/textarea/theme/Textarea.carbon.theme.js";
 import { default as We } from "../../components/toggle/theme/Toggle.carbon.theme.js";
+import { default as Ye } from "../../components/upload/theme/Upload.carbon.theme.js";
 export {
   a as Accordion,
   t as AccordionItem,
@@ -68,11 +69,11 @@ export {
   w as Drawer,
   R as Form,
   N as FormGroup,
-  j as Icon,
-  y as Image,
-  E as Input,
-  K as InputFooter,
-  U as Label,
+  U as Icon,
+  q as Image,
+  z as Input,
+  J as InputFooter,
+  O as Label,
   W as Link,
   Y as Loader,
   _ as Menu,
@@ -95,10 +96,11 @@ export {
   we as TabGroup,
   Re as Table,
   Ne as TableCell,
-  je as TableHead,
-  ye as TableHeader,
-  Ee as TableRow,
-  Ke as Tag,
-  Ue as Textarea,
-  We as Toggle
+  Ue as TableHead,
+  qe as TableHeader,
+  ze as TableRow,
+  Je as Tag,
+  Oe as Textarea,
+  We as Toggle,
+  Ye as Upload
 };

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.9.3";
+declare const _default: "1.10.1";
 export default _default;

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.9.3",
+  "version": "1.10.1",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -58,7 +58,7 @@
     "@vue/test-utils": "^2.4.0",
     "@vue/tsconfig": "^0.4.0",
     "@vuepic/vue-datepicker": "^8.3.2",
-    "@vueuse/core": "^10.2.0",
+    "@vueuse/core": "^11.1.0",
     "autoprefixer": "^10.4.0",
     "c8": "^7.12.0",
     "clean-css": "^5.3.0",
@@ -96,7 +96,7 @@
     "access": "public"
   },
   "scripts": {
-    "dev": "vite dev --mode docs",
+    "dev": "vite dev --mode docs --open",
     "build": "pnpm generate && vite build",
     "build:docs": "pnpm build --mode docs",
     "build:prod": "pnpm build && pnpm gen:types",

package/src/common/icons.ts

@@ -16,3 +16,5 @@ export const externalIcon = '<line x1="7" y1="17" x2="17" y2="7" /><polyline poi
 export const stepperPristineIcon = '<path d="M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01"/>'
 export const stepperIncompleteIcon = '<svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"></path></svg>'
 export const chevronDownIcon = '<path d="M19 9l-7 7-7-7" />'
+export const uploadIcon = '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line>'
+export const fileIcon = '<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline>'

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

@@ -201,10 +201,13 @@ const theme: ButtonTheme = {
         }))
         if (props.disabled) {
           vars.push(css.variables({
-            bg: color[100],
+            bg: gray[100],
+            border: gray[300],
+            text: gray[400],
             dark: {
-              text: color[700],
-              bg: color[900],
+              text: gray[700],
+              border: gray[700],
+              bg: gray[800],
             },
           }))
         } else {

package/src/components/checkbox/Checkbox.vue

@@ -24,15 +24,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, watch, type ExtractPublicPropTypes, type Ref, unref, nextTick } from 'vue'
-import { useTheme, type ThemeComponent } from '../../composables/useTheme'
-import { useCommon } from '../../composables/useCommon'
+import { ref, unref, watch, type ExtractPublicPropTypes, type Ref } from 'vue'
 import { useColors } from '../../composables/useColors'
-import { useInteractive } from '../../composables/useInteractive'
+import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
+import { useInteractive } from '../../composables/useInteractive'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
-import XSpinner from '../spinner/Spinner.vue'
 import XInputFooter from '../inputFooter/InputFooter.vue'
+import XSpinner from '../spinner/Spinner.vue'
 
 const props = defineProps(checkboxProps)
 

package/src/components/drawer/Drawer.vue

@@ -87,22 +87,6 @@ function onKeyDown(event: KeyboardEvent) {
 }
 
 const { lengthX, lengthY } = useSwipe(drawerRef, {
-  // passive: false,
-  // onSwipe(e: TouchEvent) {
-  //   if (lengthX.value < 0) {
-  //     const length = Math.abs(lengthX.value)
-  //     left.value = `${length}px`
-  //   } else {
-  //     left.value = '0'
-  //   }
-  // },
-  // onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
-  //   if (lengthX.value < 0 && props.width && (Math.abs(lengthX.value) / props.width) >= 0.5) {
-  //     left.value = '100%'
-  //   } else {
-  //     left.value = '0'
-  //   }
-  // },
   onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
     if (detached.value) {
       if (

package/src/components/form/Form.vue

@@ -10,7 +10,7 @@ const formProps = {
   },
   disabled: Boolean,
   errors: {
-    type: [Array, Object] as PropType<[FormError[], FormError]>,
+    type: [Array, Object] as PropType<FormError[] | FormError>,
     default: () => ([]),
   },
   title: String,
@@ -86,16 +86,22 @@ onMounted(async () => {
 
 watch(() => props.errors, (errors) => {
   if (errors) nextTick(() => {
-    if (Array.isArray(errors)) errors.forEach((error: any) => {
+    if (Array.isArray(errors)) errors.forEach((error: FormError, index) => {
       const input = inputs.find((i) => i.name === error.field)
 
-      if (input) input.setError(error.msg)
+      if (input) {
+        input.setError(error.msg)
+        if (index === 0 && input.focus) input.focus()
+      }
     })
 
     else {
       const input = inputs.find((i) => i.name === (errors as FormError).field)
 
-      if (input) input.setError((errors as FormError).msg)
+      if (input) {
+        input.setError((errors as FormError).msg)
+        if (input.focus) input.focus()
+      }
     }
   })
 })

package/src/components/formGroup/FormGroup.vue

@@ -73,6 +73,8 @@ function focus() {
   inputs[0]?.focus()
 }
 
+function blur() {}
+
 const emit = defineEmits(useInputtable.emits())
 
 const {

package/src/components/index.ts

@@ -42,3 +42,4 @@ export * from './textarea'
 export * from './themeProvider'
 export * from './toggle'
 export * from './tooltip'
+export * from './upload'

package/src/components/label/theme/Label.base.theme.ts

@@ -12,12 +12,14 @@ const theme: LabelTheme = {
     },
 
     label: ({ props }) => {
-      const classes = 'flex items-center gap-2 font-medium text-secondary-800 dark:text-secondary-200 mb-1'
+      const classes = ['flex items-center gap-2 font-medium text-secondary-800 dark:text-secondary-200 mb-1']
 
-      if (props.size === 'xs') return classes + ' text-xs'
-      else if (props.size === 'sm') return classes + ' text-sm'
-      else if (props.size === 'lg') return classes + ' text-lg'
-      else if (props.size === 'xl') return classes + ' text-xl'
+      if (props.size === 'xs') classes.push('text-xs')
+      else if (props.size === 'sm') classes.push('text-sm')
+      else if (props.size === 'lg') classes.push('text-lg')
+      else if (props.size === 'xl') classes.push('text-xl')
+
+      if (props.required) classes.push('[&_span]:after:content-["*"] [&_span]:after:ml-0.5 [&_span]:after:text-error-500')
 
       return classes
     },

package/src/components/menu/Menu.vue

@@ -43,6 +43,8 @@ export type MenuArrayItem = {
   disabled?: boolean;
   active?: boolean;
   attrs?: Record<string, unknown>;
+  prefix?: string;
+  suffix?: string;
   onClick?: (e: MouseEvent) => void;
 }
 

package/src/components/menu/MenuItem.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 const menuItemProps = {
   ...useCommon.props(),
-  ...useColors.props('primary'),
+  ...useColors.props('secondary'),
   item: {
     type: Object as PropType<MenuArrayItem>,
     default: () => {},
@@ -32,6 +32,8 @@ const menuItemProps = {
   selected: Boolean,
   disabled: Boolean,
   minimal: Boolean,
+  prefix: String,
+  suffix: String,
 }
 
 export type MenuItemProps = ExtractPublicPropTypes<typeof menuItemProps>
@@ -148,20 +150,20 @@ const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, {
     :alt="computedProps.label"
     @click="onItemClick"
   >
-    <span v-if="$slots.prefix" class="mr-2 shrink-0">
-      <slot name="prefix"></slot>
+    <span v-if="$slots.prefix || computedProps.prefix" class="mr-2 shrink-0">
+      <slot name="prefix" :item="computedProps">{{ computedProps.prefix }}</slot>
     </span>
     <x-icon v-else-if="computedProps.icon" :size="computedProps.size" :icon="computedProps.icon" class="mr-2"/>
 
     <span v-if="!minimal" class="flex-1 truncate">
-      <slot>{{ computedProps.label }}</slot>
+      <slot :item="computedProps">{{ computedProps.label }}</slot>
     </span>
 
     <span class="ml-1 shrink-0">
       <x-spinner v-if="computedProps.loading" :size="computedProps.size" />
       <template v-else>
-        <span v-if="$slots.suffix">
-          <slot name="suffix"></slot>
+        <span v-if="$slots.suffix || computedProps.suffix">
+          <slot name="suffix" :item="computedProps">{{ computedProps.suffix }}</slot>
         </span>
         <x-icon v-else-if="computedProps.iconRight" :size="computedProps.size" :icon="computedProps.iconRight"/>
       </template>

package/src/components/modal/Modal.vue

@@ -41,7 +41,7 @@ const modalProps = {
     default: true,
   },
   formErrors: {
-    type: [Array, Object] as PropType<[FormError[], FormError]>,
+    type: [Array, Object] as PropType<FormError[] | FormError>,
     default: () => ([]),
   },
   persistent: Boolean,
@@ -112,6 +112,8 @@ async function checkVisibiliy() {
   const val = props.modelValue
 
   if (val) {
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+
     value.value = val
 
     await nextTick()
@@ -121,11 +123,14 @@ async function checkVisibiliy() {
     await nextTick()
 
     initFocusTrap(modalRef)
+
+    document.body.style.paddingRight = `${scrollbarWidth}px`
     document.body.style.overflow = 'hidden'
   } else {
     visible.value = val
     value.value = val
     clearFocusTrap()
+    document.body.style.paddingRight = ''
     document.body.style.overflow = 'auto'
   }
 }

package/src/components/notifications/Notifications.vue

@@ -19,6 +19,10 @@ const notificationsProps = {
     type: Boolean,
     default: true,
   },
+  pauseOnHover: {
+    type: Boolean,
+    default: true,
+  },
   injectKey: {
     type: [Symbol, String],
     default: injectNotificationKey,
@@ -47,6 +51,8 @@ export type NotificationEvent = {
   title?: string;
   style?: string;
   message?: string;
+  timer?: ReturnType<typeof setTimeout>;
+  timerStart?: number;
   timeout?: number;
   removable?: boolean;
   align?: NotificationsAlign;
@@ -209,11 +215,18 @@ function add(notification: NotificationEvent) {
 
   merged.style = Object.keys(cssVariables).map((key) => `${key}: ${cssVariables[key]}`).join(';')
 
-  notifications.value.push(merged)
+  if (merged.timeout) {
+    const timer = setTimer(merged, merged.timeout)
 
-  listRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
+    merged.timer = timer
+    merged.timerStart = Date.now()
+  }
+
+  notifications.value.push(merged)
 
-  if (merged.timeout) setTimer(merged, merged.timeout)
+  setTimeout(() => {
+    listRef.value?.scrollTo({ top: 0, behavior: 'smooth' })
+  }, 0)
 }
 
 function remove(event: NotificationEvent) {
@@ -221,11 +234,26 @@ function remove(event: NotificationEvent) {
 }
 
 function setTimer(notification: NotificationEvent, timeout: number) {
-  setTimeout(() => {
+  return setTimeout(() => {
     remove(notification)
   }, timeout)
 }
 
+function pause(notification: NotificationEvent) {
+  if (props.pauseOnHover && notification.timer) {
+    clearTimeout(notification.timer)
+    notification.timer = undefined
+  }
+}
+
+function resume(notification: NotificationEvent) {
+  if (props.pauseOnHover && notification.timeout && notification.timerStart) {
+    const remaining = Math.max(notification.timeout - (Date.now() - notification.timerStart), 1000)
+
+    notification.timer = setTimer(notification, remaining)
+  }
+}
+
 const { styles, classes, className } = useTheme('Notifications', {}, props)
 
 defineExpose({ log, info, success, warn, warning: warn, error })
@@ -273,6 +301,8 @@ defineExpose({ log, info, success, warn, warning: warn, error })
               'mt-2': internalPosition === 'top',
             }]"
           :style="notification.style"
+          @mouseenter="pause(notification)"
+          @mouseleave="resume(notification)"
         >
           <x-icon
             v-if="notification.icon"

package/src/components/progress/Progress.vue

@@ -2,7 +2,7 @@
 const progressProps = {
   ...useColors.props('primary'),
   percentage: {
-    type: Number,
+    type: [Number, String],
     default: 0,
     validator: (value: number) => value >= 0 && value <= 100,
   },
@@ -56,7 +56,7 @@ const { styles, classes, className } = useTheme('Progress', {}, props)
       class="absolute h-full bg-secondary-100 dark:bg-secondary-700 right-0 top-0"
       :class="{ 'duration-150 transition-[width]': animate }"
       :style="{
-        width: `${100 - percentage}%`
+        width: `${100 - Number(percentage)}%`
       }"
     ></div>
   </div>