@indielayer/ui 1.0.8 → 1.0.10

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.0.8";
+declare const _default: "1.0.10";
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -21,74 +21,60 @@
     "lib",
     "src",
     "*.d.ts",
+    "exports",
     "README.md"
   ],
   "main": "lib/index.cjs.js",
   "module": "lib/index.es.js",
-  "typings": "lib/index.d.ts",
+  "types": "lib/index.d.ts",
   "exports": {
     ".": {
       "import": "./lib/index.es.js",
-      "require": "./lib/index.cjs.js"
+      "require": "./lib/index.cjs.js",
+      "types": "./lib/index.d.ts"
     },
-    "./nuxt": "./lib/nuxt.js",
-    "./style": "./lib/style.css",
-    "./styles": "./lib/style.css",
-    "./nuxt.plugin": "./lib/nuxt.plugin.js",
-    "./nuxt.plugin.js": "./lib/nuxt.plugin.js",
-    "./tailwind.preset": "./lib/tailwind.preset.js",
-    "./tailwind.preset.js": "./lib/tailwind.preset.js"
+    "./nuxt": "./exports/nuxt.mjs",
+    "./nuxt.plugin": "./exports/nuxt.plugin.js",
+    "./nuxt.plugin.js": "./exports/nuxt.plugin.js",
+    "./tailwind.preset": "./exports/tailwind.preset.js",
+    "./tailwind.preset.js": "./exports/tailwind.preset.js"
   },
   "sideEffects": false,
-  "scripts": {
-    "dev": "vite build --watch",
-    "dev2": "pnpm build-only && chokidar \"./src/**\" -c \"pnpm build-only\"",
-    "build": "pnpm generate && vite build",
-    "build-prod": "pnpm build && pnpm gen-types",
-    "build-only": "vite build",
-    "generate": "pnpm gen-version",
-    "gen-types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
-    "gen-version": "node .scripts/gen-version.js",
-    "test": "pnpm test:unit",
-    "test:unit": "vitest --environment jsdom",
-    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
-    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "prepublish": "pnpm build-prod"
-  },
   "peerDependencies": {
     "tailwindcss": "^3.0.0",
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@cypress/vite-dev-server": "^2.2.2",
-    "@cypress/vue": "^3.1.1",
-    "@rushstack/eslint-patch": "^1.1.3",
-    "@types/jsdom": "^16.2.14",
-    "@types/node": "^17.0.30",
-    "@types/ramda": "^0.28.15",
-    "@vitejs/plugin-vue": "^2.3.1",
-    "@vitejs/plugin-vue-jsx": "^1.3.10",
-    "@vue/test-utils": "^2.0.0-rc.20",
-    "@vue/tsconfig": "^0.1.3",
-    "@vueuse/core": "^8.4.2",
+    "@cypress/vite-dev-server": "^5.0.5",
+    "@cypress/vue": "^5.0.5",
+    "@indielayer/stylelint-config": "^1.0.0",
+    "@rushstack/eslint-patch": "^1.3.2",
+    "@tsconfig/node18": "^2.0.1",
+    "@types/jsdom": "^21.1.1",
+    "@types/node": "^18.16.18",
+    "@types/ramda": "^0.29.2",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vue/test-utils": "^2.4.0",
+    "@vue/tsconfig": "^0.4.0",
+    "@vueuse/core": "^10.2.0",
     "autoprefixer": "^10.4.0",
     "c8": "^7.12.0",
-    "chokidar-cli": "^3.0.0",
     "clean-css": "^5.3.0",
-    "cypress": "^9.6.0",
-    "eslint": "^8.16.0",
-    "eslint-plugin-cypress": "^2.12.1",
-    "jsdom": "^19.0.0",
+    "cypress": "^12.16.0",
+    "eslint": "^8.43.0",
+    "eslint-plugin-cypress": "^2.13.3",
+    "jsdom": "^22.1.0",
     "postcss": "^8.4.4",
-    "ramda": "^0.28.0",
+    "ramda": "^0.29.0",
     "start-server-and-test": "^1.14.0",
-    "tailwindcss": "^3.0.0",
-    "typescript": "~4.6.3",
-    "vite": "^2.9.5",
-    "vitest": "^0.9.3",
-    "vue": "^3.2.33",
-    "vue-tsc": "^0.34.15"
+    "stylelint": "^14.16.1",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.3.9",
+    "vitest": "^0.32.2",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.2"
   },
   "browserslist": [
     "> 1%",
@@ -107,5 +93,19 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0921f399b734bf6504e7c6da0226be6980bd329c"
-}
+  "scripts": {
+    "dev": "pnpm generate && vite build --watch",
+    "build": "pnpm generate && vite build",
+    "build:prod": "pnpm build && pnpm gen-types",
+    "build:only": "vite build",
+    "generate": "pnpm gen-version",
+    "gen-types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
+    "gen-version": "node .scripts/gen-version.js",
+    "test": "pnpm test:unit",
+    "test:unit": "vitest --environment jsdom",
+    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
+    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "stylelint": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore"
+  }
+}

package/src/components/alert/Alert.vue

@@ -79,7 +79,8 @@ const { styles, classes, className } = useTheme('alert', theme, props)
     box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-alert-glow), 0 4px 6px -4px var(--x-alert-glow);
   }
 
-  :global(.dark) &, &:global(.dark) {
+  :global(.dark) &,
+  &:global(.dark) {
     color: var(--x-alert-dark-text, var(--x-alert-text));
     background-color: var(--x-alert-dark-bg, var(--x-alert-bg));
     border-color: var(--x-alert-dark-border, var(--x-alert-border));

package/src/components/avatar/Avatar.vue

@@ -92,7 +92,8 @@ const { styles, classes, className } = useTheme('avatar', theme, props, { source
   background-color: var(--x-avatar-bg);
   border-color: var(--x-avatar-border);
 
-  :global(.dark) &, &:global(.dark) {
+  :global(.dark) &,
+  &:global(.dark) {
     color: var(--x-avatar-dark-text, var(--x-avatar-text));
     background-color: var(--x-avatar-dark-bg, var(--x-avatar-bg));
     border-color: var(--x-avatar-dark-border, var(--x-avatar-border));

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -14,13 +14,13 @@ import XLink from '../../components/link/Link.vue'
 import theme from './Breadcrumbs.theme'
 
 export type BreadcrumbItem = {
-  label: string,
-  to?: string | object,
-  href?: string,
-  color?: string,
-  icon?: string,
-  shadow?: boolean,
-  underline?: boolean
+  label: string;
+  to?: string | object;
+  href?: string;
+  color?: string;
+  icon?: string;
+  shadow?: boolean;
+  underline?: boolean;
 }
 
 const props = defineProps({

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

@@ -70,10 +70,8 @@ export default {
           },
         }))
       }
-    }
-
-    // light
-    else if (isLight) {
+    } else if (isLight) {
+      // light
       if (!props.outlined || props.disabled) vars.push(css.get('border', 'transparent'))
 
       if (props.disabled) {
@@ -103,10 +101,8 @@ export default {
           },
         }))
       }
-    }
-
-    // ghost
-    else if (props.ghost) {
+    } else if (props.ghost) {
+      // ghost
       if (!props.outlined) vars.push(css.get('border', 'transparent'))
 
       if (props.color) {
@@ -162,9 +158,7 @@ export default {
           }
         }
       }
-    }
-
-    else {
+    } else {
       // outlined
       if (props.outlined) {
         if (props.disabled) {

package/src/components/button/Button.vue

@@ -150,7 +150,8 @@ defineExpose({ focus, blur })
     border-color: var(--x-button-border-active, var(--x-button-border));
   }
 
-  :global(.dark) &, &:global(.dark) {
+  :global(.dark) &,
+  &:global(.dark) {
     color: var(--x-button-dark-text, var(--x-button-text));
     background-color: var(--x-button-dark-bg, var(--x-button-bg));
     border-color: var(--x-button-dark-border, var(--x-button-border));

package/src/components/button/ButtonGroup.vue

@@ -53,21 +53,21 @@ const { className, classes, styles } = useTheme('button-group', theme, props)
 .button-group {
   &:not(&--rounded) {
     > :first-child {
-      @apply rounded-l-md
+      @apply rounded-l-md;
     }
 
     > :last-child {
-      @apply rounded-r-md
+      @apply rounded-r-md;
     }
   }
 
   &--rounded {
     > :first-of-type {
-      @apply rounded-l-full
+      @apply rounded-l-full;
     }
 
     > :last-child {
-      @apply rounded-r-full
+      @apply rounded-r-full;
     }
   }
 }

package/src/components/checkbox/Checkbox.vue

@@ -112,7 +112,7 @@ defineExpose({ focus, blur, toggle, reset, validate, setError })
 <style lang="postcss" module>
   .checkbox {
     &--glow {
-      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-checkbox-glow),0 4px 6px -4px var(--x-checkbox-glow);
+      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-checkbox-glow), 0 4px 6px -4px var(--x-checkbox-glow);
     }
   }
 </style>

package/src/components/collapse/Collapse.vue

@@ -32,48 +32,48 @@ watch(() => props.expanded, () => {
   collapsed.value = !props.expanded
 })
 
-function onBeforeEnter(el: HTMLElement) {
-  if (animated.value) el.style.height = '0px'
+function onBeforeEnter(el: Element) {
+  if (animated.value) (el as HTMLElement).style.height = '0px'
 }
 
-function onEnter(el: HTMLElement, done: ()=> void) {
+function onEnter(el: Element, done: () => void) {
   if (!animated.value) done()
   else {
     el.addEventListener('transitionend', done)
     setTimeout(() => {
-      el.style.height = `${el.scrollHeight}px`
+      (el as HTMLElement).style.height = `${el.scrollHeight}px`
     }, 1)
   }
 }
 
-function onAfterEnter(el: HTMLElement) {
+function onAfterEnter(el: Element) {
   if (!animated.value) {
     animated.value = true
   } else {
-    el.style.removeProperty('height')
+    (el as HTMLElement).style.removeProperty('height')
   }
 }
 
-function onBeforeLeave(el: HTMLElement) {
+function onBeforeLeave(el: Element) {
   if (!animated.value) return
-  el.style.height = `${el.scrollHeight}px`
+  (el as HTMLElement).style.height = `${el.scrollHeight}px`
 }
 
-function onLeave(el: HTMLElement ,done: ()=> void) {
+function onLeave(el: Element, done: () => void) {
   if (!animated.value) done()
   else {
     el.addEventListener('transitionend', done)
     setTimeout(() => {
-      el.style.height = '0px'
+      (el as HTMLElement).style.height = '0px'
     }, 1)
   }
 }
 
-function onAfterLeave(el: HTMLElement) {
+function onAfterLeave(el: Element) {
   if (!animated.value) {
     animated.value = true
   } else {
-    el.style.removeProperty('height')
+    (el as HTMLElement).style.removeProperty('height')
   }
 }
 

package/src/components/drawer/Drawer.vue

@@ -7,7 +7,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, onMounted, ref, watch, watchEffect, type PropType } from 'vue'
-import { breakpointsTailwind, SwipeDirection, useBreakpoints, useEventListener, useSwipe, type Breakpoints } from '@vueuse/core'
+import { breakpointsTailwind, useBreakpoints, useEventListener, useSwipe, type Breakpoints, type UseSwipeDirection } from '@vueuse/core'
 import { useTheme } from '../../composables/theme'
 
 import XScroll from '../../components/scroll/Scroll.vue'
@@ -86,20 +86,20 @@ const { lengthX, lengthY } = useSwipe(drawerRef, {
   //     left.value = '0'
   //   }
   // },
-  // onSwipeEnd(e: TouchEvent, direction: SwipeDirection) {
+  // 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: SwipeDirection) {
+  onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
     if (detached.value) {
       if (
-        (props.position === 'left' && direction === 'LEFT') ||
-            (props.position === 'right' && direction === 'RIGHT') ||
-            (props.position === 'top' && direction === 'UP') ||
-            (props.position === 'bottom' && direction === 'DOWN')
+        (props.position === 'left' && direction === 'left') ||
+            (props.position === 'right' && direction === 'right') ||
+            (props.position === 'top' && direction === 'up') ||
+            (props.position === 'bottom' && direction === 'down')
       ) close()
     }
   },
@@ -129,15 +129,15 @@ const autoClasses = computed(() => {
   return c
 })
 
-function onBeforeEnter(el: HTMLElement) {
+function onBeforeEnter(el: Element) {
   el.classList.add('inset-0')
-  if (props.position === 'top') el.style.top = `-${props.height}px`
-  else if (props.position === 'bottom') el.style.bottom = `-${props.height}px`
-  else if (props.position === 'left') el.style.left = `-${props.width}px`
-  else if (props.position === 'right') el.style.right = `-${props.width}px`
+  if (props.position === 'top') (el as HTMLElement).style.top = `-${props.height}px`
+  else if (props.position === 'bottom') (el as HTMLElement).style.bottom = `-${props.height}px`
+  else if (props.position === 'left') (el as HTMLElement).style.left = `-${props.width}px`
+  else if (props.position === 'right') (el as HTMLElement).style.right = `-${props.width}px`
 }
 
-function onEnter(el: HTMLElement, done: ()=> void) {
+function onEnter(el: Element, done: () => void) {
   if (!detached.value) {
     done()
 
@@ -146,27 +146,27 @@ function onEnter(el: HTMLElement, done: ()=> void) {
   el.addEventListener('transitionend', done)
   setTimeout(() => {
     if (props.backdrop) el.classList.add('bg-gray-500/30')
-    if (props.position === 'top') el.style.top = '0'
-    else if (props.position === 'bottom') el.style.bottom = '0'
-    else if (props.position === 'left') el.style.left = '0'
-    else if (props.position === 'right') el.style.right = '0'
+    if (props.position === 'top') (el as HTMLElement).style.top = '0'
+    else if (props.position === 'bottom') (el as HTMLElement).style.bottom = '0'
+    else if (props.position === 'left') (el as HTMLElement).style.left = '0'
+    else if (props.position === 'right') (el as HTMLElement).style.right = '0'
   }, 1)
 }
 
-function onBeforeLeave(el: HTMLElement) {}
+function onBeforeLeave(el: Element) {}
 
-function onLeave(el: HTMLElement, done: ()=> void) {
+function onLeave(el: Element, done: () => void) {
   el.addEventListener('transitionend', done)
   setTimeout(() => {
     if (props.backdrop) el.classList.remove('bg-gray-500/30')
-    if (props.position === 'top') el.style.top = `-${props.height}px`
-    else if (props.position === 'bottom') el.style.bottom = `-${props.height}px`
-    else if (props.position === 'left') el.style.left = `-${props.width}px`
-    else if (props.position === 'right') el.style.right = `-${props.width}px`
+    if (props.position === 'top') (el as HTMLElement).style.top = `-${props.height}px`
+    else if (props.position === 'bottom') (el as HTMLElement).style.bottom = `-${props.height}px`
+    else if (props.position === 'left') (el as HTMLElement).style.left = `-${props.width}px`
+    else if (props.position === 'right') (el as HTMLElement).style.right = `-${props.width}px`
   }, 1)
 }
 
-function onAfterLeave(el: HTMLElement, done: ()=> void) {
+function onAfterLeave(el: Element) {
   el.classList.remove('inset-0')
 }
 

package/src/components/form/Form.vue

@@ -13,15 +13,15 @@ import { useTheme } from '../../composables/theme'
 import theme from './Form.theme'
 
 export type FormError = {
-  field: string
-  msg: string
+  field: string;
+  msg: string;
 }
 
 export type Form = {
-  name: string,
-  focus: ()=> void,
-  validate: ()=> boolean,
-  setError: (val: string)=> void,
+  name: string;
+  focus: () => void;
+  validate: () => boolean;
+  setError: (val: string) => void;
 }
 
 const props = defineProps({
@@ -45,15 +45,14 @@ const emit = defineEmits(['submit'])
 const inputs: Form[] = []
 
 provide(injectFormKey, {
-  registerInput: (name: string, focus: ()=> void, validate: ()=> boolean, setError: (val: string)=> void) => {
+  registerInput: (name: string, focus: () => void, validate: () => boolean, setError: (val: string) => void) => {
     const exists = inputs.find((i) => i.name === name)
 
     if (exists) {
       exists.focus = focus
       exists.validate = validate
       exists.setError = setError
-    }
-    else inputs.push({ name, focus, validate, setError })
+    } else inputs.push({ name, focus, validate, setError })
   },
   unregisterInput: (name: string) => {
     const index = inputs.findIndex((i) => i.name === name)

package/src/components/input/Input.vue

@@ -60,11 +60,11 @@ function onChange(e: Event) {
     const value = Number(target.value)
 
     if (typeof props.min !== 'undefined') {
-      if (value < props.min) target.value = props.min.toString()
+      if (value < Number(props.min)) target.value = props.min.toString()
     }
 
     if (typeof props.max !== 'undefined') {
-      if (value > props.max) target.value = props.max.toString()
+      if (value > Number(props.max)) target.value = props.max.toString()
     }
   }
 }

package/src/components/link/Link.vue

@@ -28,7 +28,7 @@ const { styles, classes, className } = useTheme('link', theme, props)
 
 <template>
   <component
-    :is="to ? 'router-link' : tag"
+    :is="to ? (tag !== 'a' ? tag : 'router-link') : tag"
     :to="to"
     :style="styles"
     :class="[
@@ -62,12 +62,14 @@ const { styles, classes, className } = useTheme('link', theme, props)
 
     &--shadow {
       box-shadow: inset 0 -0.315em 0 0 var(--x-link-shadow);
+
       &:hover {
         box-shadow: inset 0 -1.325em 0 0 var(--x-link-shadow);
       }
     }
 
-    :global(.dark) &, &:global(.dark) {
+    :global(.dark) &,
+    &:global(.dark) {
       color: var(--x-link-dark-text);
 
       &:hover {
@@ -76,6 +78,7 @@ const { styles, classes, className } = useTheme('link', theme, props)
 
       &--shadow {
         box-shadow: inset 0 -0.315em 0 0 var(--x-link-dark-shadow);
+
         &:hover {
           box-shadow: inset 0 -1.325em 0 0 var(--x-link-dark-shadow);
         }

package/src/components/menu/MenuItem.vue

@@ -23,9 +23,13 @@ const props = defineProps({
     default: () => {},
   },
   active: Boolean,
+  attrs: {
+    type: Object,
+    default: () => {},
+  },
   onClick: Function,
   inactive: Boolean,
-  value: [Number,String],
+  value: [Number, String],
   to: String,
   exact: Boolean,
   href: String,
@@ -111,6 +115,7 @@ const { styles, classes, className } = useTheme('menu-item', theme, computedProp
   <component
     :is="htmlTag"
     ref="elRef"
+    v-bind="cItem.attrs"
     :to="cItem.to"
     :target="cItem.target"
     :color="cItem.color"
@@ -150,12 +155,13 @@ const { styles, classes, className } = useTheme('menu-item', theme, computedProp
 </template>
 
 <style lang="postcss" module scoped>
-  .menu-item, .menu-item.x-link {
+  .menu-item,
+  .menu-item.x-link {
     color: var(--x-menu-item-text);
     background-color: var(--x-menu-item-bg);
 
-    &:before {
-      content: '';
+    &::before {
+      content: "";
       position: absolute;
       left: -1px;
       height: 100%;
@@ -168,9 +174,11 @@ const { styles, classes, className } = useTheme('menu-item', theme, computedProp
       background-color: var(--x-menu-item-bg-hover, var(--x-menu-item-bg));
     }
 
-    :global(.dark) &, &:global(.dark) {
+    :global(.dark) &,
+    &:global(.dark) {
       color: var(--x-menu-item-dark-text);
       background: var(--x-menu-item-dark-bg);
+
       &:hover {
         color: var(--x-menu-item-dark-text-hover, var(--x-menu-item-dark-text));
         background-color: var(--x-menu-item-dark-bg-hover, var(--x-menu-item-dark-bg));
@@ -179,8 +187,10 @@ const { styles, classes, className } = useTheme('menu-item', theme, computedProp
   }
 
   :global(.x-menu-inner) {
+    /* stylelint-disable-next-line no-descending-specificity */
     .menu-item {
-      &:hover:before, &--active:before {
+      &:hover::before,
+      &--active::before {
         background-color: var(--x-menu-item-border-hover);
       }
     }

package/src/components/modal/Modal.vue

@@ -29,7 +29,7 @@ const value = ref(props.modelValue)
 const visible = ref(false)
 const modalRef = ref<HTMLElement | null>(null)
 
-let stopClickOutside: undefined | (()=> void) = undefined
+let stopClickOutside: undefined | (() => void) = undefined
 
 watch(value, (val) => {
   if (stopClickOutside) {

package/src/components/notifications/Notifications.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 const validators = {
-  align: ['left','right'],
-  position: ['bottom','top'],
+  align: ['left', 'right'],
+  position: ['bottom', 'top'],
 }
 
 export default {
@@ -26,22 +26,22 @@ import theme from './Notifications.theme'
 export type NotificationAlign = 'left' | 'right'
 export type NotificationPosition = 'bottom' | 'top'
 export type NotificationAction = {
-  onClick: ()=> void,
-  label: string,
-  color?: string
+  onClick: () => void;
+  label: string;
+  color?: string;
 }
 export type NotificationEvent = {
-  id?: number,
-  icon?: string,
-  action?: NotificationAction,
-  iconColor?: string,
-  title?: string,
-  style?: string,
-  message?: string,
-  timeout?: number,
-  removable?: boolean,
-  align?: NotificationAlign,
-  position?: NotificationPosition
+  id?: number;
+  icon?: string;
+  action?: NotificationAction;
+  iconColor?: string;
+  title?: string;
+  style?: string;
+  message?: string;
+  timeout?: number;
+  removable?: boolean;
+  align?: NotificationAlign;
+  position?: NotificationPosition;
 }
 
 const props = defineProps({