@indielayer/ui 1.18.0 → 2.0.0

package/lib/virtual/utils/shallowCompare.js

@@ -1,14 +1,10 @@
-import { assert as n } from "./assert.js";
-function i(e, r) {
-  if (e === r)
-    return !0;
-  if (!!e != !!r || (n(e !== void 0), n(r !== void 0), Object.keys(e).length !== Object.keys(r).length))
-    return !1;
-  for (const t in e)
-    if (!Object.is(r[t], e[t]))
-      return !1;
-  return !0;
+import { assert as e } from "./assert.js";
+//#region src/virtual/utils/shallowCompare.ts
+function t(t, n) {
+	if (t === n) return !0;
+	if (!!t != !!n || (e(t !== void 0), e(n !== void 0), Object.keys(t).length !== Object.keys(n).length)) return !1;
+	for (let e in t) if (!Object.is(n[e], t[e])) return !1;
+	return !0;
 }
-export {
-  i as shallowCompare
-};
+//#endregion
+export { t as shallowCompare };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.18.0",
+  "version": "2.0.0",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -39,28 +39,28 @@
     "./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"
+    "./tailwind.css": "./exports/tailwind.css"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./exports/tailwind.css"
+  ],
   "peerDependencies": {
-    "tailwindcss": "^3.0.0",
+    "tailwindcss": "^4.0.0",
     "vue": "^3.4.0"
   },
   "devDependencies": {
-    "@indielayer/stylelint-config": "^1.0.0",
     "@rushstack/eslint-patch": "^1.3.2",
-    "@unhead/vue": "^2.0.19",
-    "@tsconfig/node18": "^2.0.1",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@tsconfig/node22": "^22.0.5",
     "@types/jsdom": "^21.1.1",
-    "@types/node": "^18.16.18",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@types/node": "^22.12.0",
+    "@unhead/vue": "^2.1.15",
+    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitejs/plugin-vue-jsx": "^5.1.5",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.4.0",
     "@vuepic/vue-datepicker": "^11.0.2",
     "@vueuse/core": "^11.1.0",
-    "autoprefixer": "^10.4.0",
     "c8": "^7.12.0",
     "clean-css": "^5.3.0",
     "eslint": "^8.43.0",
@@ -69,13 +69,12 @@
     "jsdom": "^22.1.0",
     "postcss": "^8.4.4",
     "rollup-plugin-visualizer": "^5.9.2",
-    "shiki": "^3.15.0",
-    "stylelint": "^14.16.1",
-    "tailwindcss": "^3.3.2",
+    "shiki": "^4.1.0",
+    "tailwindcss": "^4.3.0",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11",
-    "vitest": "^0.32.2",
-    "vue": "^3.5.0",
+    "vite": "^8.0.14",
+    "vitest": "^4.1.7",
+    "vue": "^3.5.18",
     "vue-router": "^4.2.2",
     "vue-tsc": "^1.8.2"
   },
@@ -105,16 +104,15 @@
     "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:types": "rm -rf lib/src lib/docs && vue-tsc --declaration --emitDeclarationOnly -p tsconfig.build-types.json",
     "gen:version": "node .scripts/gen-version.cjs",
     "gen:search": "node .scripts/gen-search.cjs",
     "gen:llms": "node .scripts/gen-llms.cjs",
+    "gen:llms-full": "node .scripts/gen-llms-full.cjs",
     "gen:sitemap": "node .scripts/gen-sitemap.cjs",
     "test": "pnpm test:unit",
     "test:ci": "vitest run --environment jsdom",
     "test:unit": "vitest --environment jsdom",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "stylelint": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore",
-    "stylelint:fix": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore --fix"
+    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false"
   }
 }

package/src/common/__tests__/inputGroupRadius.spec.ts

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest'
+import { inputGroupRadiusClasses } from '../inputGroupRadius'
+
+describe('inputGroupRadiusClasses', () => {
+  it('returns full radius for only', () => {
+    expect(inputGroupRadiusClasses('only')).toEqual(['rounded-md'])
+  })
+
+  it('returns joined radius for first and last', () => {
+    expect(inputGroupRadiusClasses('first')).toEqual(['rounded-l-md', 'rounded-r-none'])
+    expect(inputGroupRadiusClasses('last')).toEqual(['rounded-r-md', 'rounded-l-none'])
+    expect(inputGroupRadiusClasses('middle')).toEqual(['rounded-none'])
+  })
+})

package/src/common/icons.ts

@@ -18,3 +18,4 @@ export const stepperIncompleteIcon = '<svg focusable="false" preserveAspectRatio
 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>'
+export const emptyIcon = '<path d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />'

package/src/common/inputGroupRadius.ts

@@ -0,0 +1,11 @@
+export type InputGroupPosition = 'only' | 'first' | 'middle' | 'last'
+
+export function inputGroupRadiusClasses(position?: InputGroupPosition | null) {
+  if (!position) return []
+
+  if (position === 'only') return ['rounded-md']
+  if (position === 'first') return ['rounded-l-md', 'rounded-r-none']
+  if (position === 'last') return ['rounded-r-md', 'rounded-l-none']
+
+  return ['rounded-none']
+}

package/src/common/props.ts

@@ -0,0 +1,34 @@
+import type { Prop } from 'vue'
+
+/**
+ * Optional boolean prop that stays `undefined` when omitted.
+ * Use for props that participate in app-level `defaults` (see `resolvePropsWithDefaults`).
+ *
+ * Migrate: visual variants (outlined, ghost, light, flat, rounded, glow, filled, shadow, underline),
+ * layout (block, dense, vertical, striped), and feature toggles users may default app-wide
+ * (clearable, filterable, removable, selectable).
+ *
+ * Do not migrate: state/behavior (disabled, loading, required, error, readonly, indeterminate),
+ * controlled values (modelValue, shown, expanded, active, selected), or props that already
+ * declare `default: true/false` in defineProps.
+ *
+ * Plain `Boolean` props are cast to `false` when absent in Vue 3.
+ * @see https://vuejs.org/guide/components/props.html#boolean-casting
+ */
+export function optionalBooleanProp(): Prop<boolean | undefined> {
+  return {
+    type: Boolean,
+    default: undefined,
+  }
+}
+
+/** Shared variant booleans for Button and ButtonGroup. */
+export const variantBooleanProps = () => ({
+  outlined: optionalBooleanProp(),
+  rounded: optionalBooleanProp(),
+  glow: optionalBooleanProp(),
+  ghost: optionalBooleanProp(),
+  light: optionalBooleanProp(),
+  flat: optionalBooleanProp(),
+  block: optionalBooleanProp(),
+})

package/src/componentDefaults.ts

@@ -0,0 +1,19 @@
+/** Variant booleans use `optionalBooleanProp()` from `./common/props` so app `defaults` apply when omitted. */
+import type { ComponentThemes } from './theme'
+import type { AlertProps } from './components/alert/Alert.vue'
+import type { ButtonProps } from './components/button/Button.vue'
+import type { CardProps } from './components/card/Card.vue'
+import type { InputProps } from './components/input/Input.vue'
+
+type ComponentDefaultsMap = {
+  Alert: AlertProps;
+  Button: ButtonProps;
+  Card: CardProps;
+  Input: InputProps;
+}
+
+export type ComponentDefaults = {
+  [K in keyof ComponentDefaultsMap]?: Partial<ComponentDefaultsMap[K]>;
+} & {
+  [K in Exclude<keyof ComponentThemes, keyof ComponentDefaultsMap>]?: Record<string, unknown>;
+}

package/src/components/accordion/Accordion.vue

@@ -1,11 +1,13 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const accordionProps = {
   tag: {
     type: String,
     default: 'div',
   },
   disabled: Boolean,
-  expanded: Boolean,
+  expanded: optionalBooleanProp(),
   showIcon: {
     type: Boolean,
     default: true,

package/src/components/accordion/AccordionItem.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const accordionItemAlign = ['left', 'right'] as const
 const accordionItemProps = {
   tag: {
@@ -6,7 +8,7 @@ const accordionItemProps = {
     default: 'div',
   },
   disabled: Boolean,
-  expanded: Boolean,
+  expanded: optionalBooleanProp(),
   showIcon: {
     type: Boolean,
     default: true,

package/src/components/alert/Alert.vue

@@ -1,12 +1,14 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const alertType = ['info', 'success', 'error', 'warning'] as const
 const alertProps = {
   ...useColors.props(),
   type: String as PropType<AlertType>,
-  glow: Boolean,
-  light: Boolean,
-  outlined: Boolean,
-  removable: Boolean,
+  glow: optionalBooleanProp(),
+  light: optionalBooleanProp(),
+  outlined: optionalBooleanProp(),
+  removable: optionalBooleanProp(),
   closeLabel: String,
 }
 
@@ -27,25 +29,27 @@ export default {
 <script setup lang="ts">
 import { computed, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useColors } from '../../composables/useColors'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { closeIcon, successIcon, errorIcon, warningIcon, infoIcon } from '../../common/icons'
 
 import XIcon from '../icon/Icon.vue'
 
 const props = defineProps(alertProps)
+const resolvedProps = useResolvedComponentProps('Alert', props)
 
 defineEmits(['remove'])
 
 const icon = computed(() => {
-  if (props.type === 'info') return infoIcon
-  else if (props.type === 'success') return successIcon
-  else if (props.type === 'error') return errorIcon
-  else if (props.type === 'warning') return warningIcon
+  if (resolvedProps.value.type === 'info') return infoIcon
+  else if (resolvedProps.value.type === 'success') return successIcon
+  else if (resolvedProps.value.type === 'error') return errorIcon
+  else if (resolvedProps.value.type === 'warning') return warningIcon
 
   return ''
 })
 
-const { styles, classes, className } = useTheme('Alert', {}, props)
+const { styles, classes, className } = useTheme('Alert', {}, resolvedProps)
 </script>
 
 <template>
@@ -54,14 +58,14 @@ const { styles, classes, className } = useTheme('Alert', {}, props)
     :class="[
       className,
       $style['alert'],
-      glow ? $style['alert--glow'] : '',
+      resolvedProps.glow ? $style['alert--glow'] : '',
       classes.wrapper,
     ]"
   >
 
     <slot name="icon">
       <x-icon
-        v-if="type"
+        v-if="resolvedProps.type"
         :icon="icon"
         class="text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-alert-dark-icon)]"
       />
@@ -70,9 +74,9 @@ const { styles, classes, className } = useTheme('Alert', {}, props)
     <div>
       <slot></slot>
     </div>
-    <template v-if="removable">
-      <div class="flex-grow"></div>
-      <button type="button" class="shrink-0" :aria-label="closeLabel" @click="(e: Event) => $emit('remove', e)">
+    <template v-if="resolvedProps.removable">
+      <div class="grow"></div>
+      <button type="button" class="shrink-0" :aria-label="resolvedProps.closeLabel" @click="(e: Event) => $emit('remove', e)">
         <slot name="removeIcon">
           <x-icon :icon="closeIcon"/>
         </slot>
@@ -81,21 +85,21 @@ const { styles, classes, className } = useTheme('Alert', {}, props)
   </div>
 </template>
 
-<style lang="postcss" module>
+<style module>
 .alert {
   color: var(--x-alert-text);
   background-color: var(--x-alert-bg);
   border-color: var(--x-alert-border);
+}
 
-  &--glow {
-    box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-alert-glow), 0 4px 6px -4px var(--x-alert-glow);
-  }
+.alert--glow {
+  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) {
-    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));
-  }
+:global(.dark) .alert,
+.alert: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));
 }
 </style>

package/src/components/avatar/Avatar.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const avatarProps = {
   ...useCommon.props(),
   ...useColors.props('primary'),
@@ -9,8 +11,8 @@ const avatarProps = {
   name: String,
   alt: String,
   image: String,
-  outlined: Boolean,
-  rounded: Boolean,
+  outlined: optionalBooleanProp(),
+  rounded: optionalBooleanProp(),
 }
 
 export type AvatarProps = ExtractPublicPropTypes<typeof avatarProps>
@@ -92,7 +94,7 @@ const { styles, classes, className } = useTheme('Avatar', {}, props, { source })
   </component>
 </template>
 
-<style lang="postcss" module>
+<style module>
 .avatar {
   color: var(--x-avatar-text);
   background-color: var(--x-avatar-bg);

package/src/components/badge/Badge.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const badgeAlign = ['left', 'right'] as const
 const badgePosition = ['top', 'bottom'] as const
 const badgeProps = {
@@ -18,8 +20,8 @@ const badgeProps = {
   },
   offsetX: [Number, String],
   offsetY: [Number, String],
-  animated: Boolean,
-  outlined: Boolean,
+  animated: optionalBooleanProp(),
+  outlined: optionalBooleanProp(),
   icon: String,
   show: {
     type: Boolean,
@@ -47,10 +49,12 @@ export default {
 <script setup lang="ts">
 import { computed, useSlots, type PropType, type ExtractPublicPropTypes } from 'vue'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useResolvedComponentProps } from '../../composables/resolveComponentDefaults'
 import { useCommon } from '../../composables/useCommon'
 import { useColors } from '../../composables/useColors'
 
 const props = defineProps(badgeProps)
+const resolvedProps = useResolvedComponentProps('Badge', props)
 
 const slots = useSlots()
 
@@ -62,7 +66,7 @@ const positionClasses = computed(() => {
   if (props.align === 'left') classes.push('left-0')
   if (props.align === 'right') classes.push('right-0')
   if (slots.content) classes.push('-m-[7.5%]')
-  else if (props.outlined) {
+  else if (resolvedProps.value.outlined) {
     classes.push('-m-[5%]')
   } else {
     classes.push('-m-[3.5%]')

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -1,4 +1,6 @@
 <script lang="ts">
+import { optionalBooleanProp } from '../../common/props'
+
 const breadcrumbsProps = {
   ...useColors.props(),
   items: Array as PropType<BreadcrumbsItem[]>,
@@ -7,8 +9,8 @@ const breadcrumbsProps = {
     default: '/',
   },
   icon: String,
-  shadow: Boolean,
-  underline: Boolean,
+  shadow: optionalBooleanProp(),
+  underline: optionalBooleanProp(),
 }
 
 export type BreadcrumbsItem = {