@indielayer/ui 1.5.0 → 1.5.2

package/lib/nuxt.plugin.js

@@ -1,8 +1,15 @@
 import { defineNuxtPlugin } from '#app'
-import create from '../src/create'
+import { BaseTheme, injectIconsKey, injectOptionsKey, injectThemeKey, createUI } from '../src'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const UI = create(nuxtApp.$config.public?.indielayerOptions)
+  const UI = createUI({
+    ...nuxtApp.$config.public?.indielayerOptions,
+    theme: BaseTheme,
+    injectIconsKey,
+    injectOptionsKey,
+    injectThemeKey,
+
+  })
 
   nuxtApp.vueApp.use(UI)
 })

package/lib/themes/base/index.js

@@ -1,8 +1,8 @@
 import * as e from "./components.js";
-import s from "./styles.css.js";
+import s from "./styles.js";
 const t = {
   name: "Base",
-  styles: `${s}`,
+  styles: s,
   classPrefix: "x-",
   components: e
 }, m = t;

package/lib/themes/base/styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "\nhtml {\n  color: #111827;\n  background-color: white;\n}\n\nhtml.dark {\n  color: #f3f4f6;\n  background-color: #111827;\n}\n\nbody {\n  font-size: 14px;\n}\n\n*,\n::before,\n::after {\n  border-color: #e5e7eb;\n}\n\n.dark *,\n.dark ::before,\n.dark ::after {\n  border-color: #374151;\n}\n\n:root {\n  --font-family-sans: Inter, -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;\n  --font-family-mono: ui-monospace, monospace;\n  --border-color: 226, 232, 240;\n  --primary-color-50: 236, 253, 245;\n  --primary-color-100: 209, 250, 229;\n  --primary-color-200: 167, 243, 208;\n  --primary-color-300: 110, 231, 183;\n  --primary-color-400: 52, 211, 153;\n  --primary-color-500: 16, 185, 129;\n  --primary-color-600: 5, 150, 105;\n  --primary-color-700: 4, 120, 87;\n  --primary-color-800: 6, 95, 70;\n  --primary-color-900: 6, 78, 59;\n  --primary-color-950: 2, 44, 34;\n  --secondary-color-50: 248, 250, 252;\n  --secondary-color-100: 241, 245, 249;\n  --secondary-color-200: 226, 232, 240;\n  --secondary-color-300: 203, 213, 225;\n  --secondary-color-400: 148, 163, 184;\n  --secondary-color-500: 100, 116, 139;\n  --secondary-color-600: 71, 85, 105;\n  --secondary-color-700: 51, 65, 85;\n  --secondary-color-800: 30, 41, 59;\n  --secondary-color-900: 15, 23, 42;\n  --secondary-color-950: 2, 6, 23;\n  --success-color-50: 240, 253, 244;\n  --success-color-100: 220, 252, 231;\n  --success-color-200: 187, 247, 208;\n  --success-color-300: 134, 239, 172;\n  --success-color-400: 74, 222, 128;\n  --success-color-500: 34, 197, 94;\n  --success-color-600: 22, 163, 74;\n  --success-color-700: 21, 128, 61;\n  --success-color-800: 22, 101, 52;\n  --success-color-900: 20, 83, 45;\n  --success-color-950: 5, 46, 22;\n  --warning-color-50: 254, 252, 232;\n  --warning-color-100: 254, 249, 195;\n  --warning-color-200: 254, 240, 138;\n  --warning-color-300: 253, 224, 71;\n  --warning-color-400: 250, 204, 21;\n  --warning-color-500: 234, 179, 8;\n  --warning-color-600: 202, 138, 4;\n  --warning-color-700: 161, 98, 7;\n  --warning-color-800: 133, 77, 14;\n  --warning-color-900: 113, 63, 18;\n  --warning-color-950: 66, 32, 6;\n  --error-color-50: 254, 242, 242;\n  --error-color-100: 254, 226, 226;\n  --error-color-200: 254, 202, 202;\n  --error-color-300: 252, 165, 165;\n  --error-color-400: 248, 113, 113;\n  --error-color-500: 239, 68, 68;\n  --error-color-600: 220, 38, 38;\n  --error-color-700: 185, 28, 28;\n  --error-color-800: 153, 27, 27;\n  --error-color-900: 127, 29, 29;\n  --error-color-950: 69, 10, 10;\n}\n";
+export default _default;

package/{src/themes/base/styles.css → lib/themes/base/styles.js}

@@ -1,4 +1,4 @@
-/* stylelint-disable value-keyword-case */
+const o = `
 html {
   color: #111827;
   background-color: white;
@@ -85,3 +85,7 @@ body {
   --error-color-900: 127, 29, 29;
   --error-color-950: 69, 10, 10;
 }
+`;
+export {
+  o as default
+};

package/lib/themes/carbon/index.js

@@ -1,11 +1,11 @@
 import * as e from "./components.js";
-import f from "./styles.css.js";
+import f from "./styles.js";
 const a = {
   name: "Carbon",
   colors: {
     primary: { 50: "#eff6ff", 100: "#dbeafe", 200: "#bfdbfe", 300: "#93c5fd", 400: "#60a5fa", 500: "#3b82f6", 600: "#2563eb", 700: "#1d4ed8", 800: "#1e40af", 900: "#1e3a8a", 950: "#172554" }
   },
-  styles: `${f}`,
+  styles: f,
   classPrefix: "x-",
   components: e
 }, r = a;

package/lib/themes/carbon/styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "\nhtml {\n  color: #111827;\n  background-color: white;\n}\n\nhtml.dark {\n  color: #f3f4f6;\n  background-color: #111827;\n}\n\n*,\n::before,\n::after {\n  border-color: #e5e7eb;\n}\n\n.dark *,\n.dark ::before,\n.dark ::after {\n  border-color: #374151;\n}\n\n:root {\n  --font-family-sans: \"IBM Plex Sans\", \"Helvetica Neue\", arial, sans-serif;\n  --font-family-mono: \"IBM Plex Mono\", \"Menlo\", \"DejaVu Sans Mono\", \"Bitstream Vera Sans Mono\", courier, monospace;\n  --border-color: 226, 232, 240;\n  --primary-color-50: 236, 253, 245;\n  --primary-color-100: 209, 250, 229;\n  --primary-color-200: 167, 243, 208;\n  --primary-color-300: 110, 231, 183;\n  --primary-color-400: 52, 211, 153;\n  --primary-color-500: 16, 185, 129;\n  --primary-color-600: 5, 150, 105;\n  --primary-color-700: 4, 120, 87;\n  --primary-color-800: 6, 95, 70;\n  --primary-color-900: 6, 78, 59;\n  --primary-color-950: 2, 44, 34;\n  --secondary-color-50: 248, 250, 252;\n  --secondary-color-100: 241, 245, 249;\n  --secondary-color-200: 226, 232, 240;\n  --secondary-color-300: 203, 213, 225;\n  --secondary-color-400: 148, 163, 184;\n  --secondary-color-500: 100, 116, 139;\n  --secondary-color-600: 71, 85, 105;\n  --secondary-color-700: 51, 65, 85;\n  --secondary-color-800: 30, 41, 59;\n  --secondary-color-900: 15, 23, 42;\n  --secondary-color-950: 2, 6, 23;\n  --success-color-50: 240, 253, 244;\n  --success-color-100: 220, 252, 231;\n  --success-color-200: 187, 247, 208;\n  --success-color-300: 134, 239, 172;\n  --success-color-400: 74, 222, 128;\n  --success-color-500: 34, 197, 94;\n  --success-color-600: 22, 163, 74;\n  --success-color-700: 21, 128, 61;\n  --success-color-800: 22, 101, 52;\n  --success-color-900: 20, 83, 45;\n  --success-color-950: 5, 46, 22;\n  --warning-color-50: 254, 252, 232;\n  --warning-color-100: 254, 249, 195;\n  --warning-color-200: 254, 240, 138;\n  --warning-color-300: 253, 224, 71;\n  --warning-color-400: 250, 204, 21;\n  --warning-color-500: 234, 179, 8;\n  --warning-color-600: 202, 138, 4;\n  --warning-color-700: 161, 98, 7;\n  --warning-color-800: 133, 77, 14;\n  --warning-color-900: 113, 63, 18;\n  --warning-color-950: 66, 32, 6;\n  --error-color-50: 254, 242, 242;\n  --error-color-100: 254, 226, 226;\n  --error-color-200: 254, 202, 202;\n  --error-color-300: 252, 165, 165;\n  --error-color-400: 248, 113, 113;\n  --error-color-500: 239, 68, 68;\n  --error-color-600: 220, 38, 38;\n  --error-color-700: 185, 28, 28;\n  --error-color-800: 153, 27, 27;\n  --error-color-900: 127, 29, 29;\n  --error-color-950: 69, 10, 10;\n}\n";
+export default _default;

package/lib/themes/carbon/{styles.css.js → styles.js}

@@ -1,4 +1,5 @@
-const o = `html {
+const o = `
+html {
   color: #111827;
   background-color: white;
 }

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.5.0";
+declare const _default: "1.5.2";
 export default _default;

package/lib/version.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -62,7 +62,7 @@
     "c8": "^7.12.0",
     "clean-css": "^5.3.0",
     "eslint": "^8.43.0",
-    "floating-vue": "^5.2.0",
+    "floating-vue": "^5.2.2",
     "jsdom": "^22.1.0",
     "postcss": "^8.4.4",
     "rollup-plugin-visualizer": "^5.9.2",

package/src/components/accordion/AccordionItem.vue

@@ -144,6 +144,7 @@ defineExpose({ toggle, open, close })
     :aria-expanded="collapsed ? 'false' : 'true'"
   >
     <button
+      type="button"
       :class="classes.wrapper"
       @click="toggle"
     >

package/src/components/accordion/theme/AccordionItem.base.theme.ts

@@ -3,7 +3,7 @@ import type { AccordionItemTheme } from '../AccordionItem.vue'
 const theme: AccordionItemTheme = {
   classes: {
     wrapper: ({ props, slots, data }) => {
-      const classes = ['relative flex items-center w-full text-left']
+      const classes = ['relative flex items-center w-full text-left rounded']
 
       if (!data.isInsideAccordion) return classes
 
@@ -11,7 +11,7 @@ const theme: AccordionItemTheme = {
         if (props.iconAlign === 'left') classes.push('pl-8 pr-4')
         else classes.push('pr-8 pl-4')
         classes.push('py-2')
-        if (!props.disabled) classes.push('hover:bg-secondary-50 dark:hover:bg-secondary-600')
+        if (!props.disabled) classes.push('hover:bg-secondary-100 dark:hover:bg-secondary-600')
       }
 
       if (!props.disabled) classes.push('cursor-pointer')

package/src/components/alert/Alert.vue

@@ -72,7 +72,7 @@ const { styles, classes, className } = useTheme('Alert', {}, props)
     </div>
     <template v-if="removable">
       <div class="flex-grow"></div>
-      <button class="shrink-0" :aria-label="closeLabel" @click="(e: Event) => $emit('remove', e)">
+      <button type="button" class="shrink-0" :aria-label="closeLabel" @click="(e: Event) => $emit('remove', e)">
         <slot name="removeIcon">
           <x-icon :icon="closeIcon"/>
         </slot>

package/src/components/button/Button.vue

@@ -122,7 +122,7 @@ defineExpose({ focus, blur })
       :label="loadingLabel"
       :status="loadingStatus"
     />
-    <div :class="{ 'invisible': loading }">
+    <div class="inline-flex items-center justify-center" :class="{ 'invisible': loading }">
       <x-icon
         v-if="computedIconLeft"
         :size="computedSize"

package/src/components/checkbox/theme/Checkbox.base.theme.ts

@@ -5,7 +5,7 @@ const theme: CheckboxTheme = {
     wrapper: ({ data }) => {
       const classes = ['inline-block relative cursor-pointer align-middle']
 
-      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-3')
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-5')
 
       return classes
     },
@@ -38,8 +38,10 @@ const theme: CheckboxTheme = {
       return classes
     },
 
-    label: ({ props }) => {
-      const classes = ['inline-block font-medium text-secondary-800 dark:text-secondary-200 pl-2']
+    label: ({ props, data }) => {
+      const classes = ['inline-block text-secondary-800 dark:text-secondary-200 pl-2']
+
+      classes.push(data.isInsideFormGroup ? 'font-normal' : 'font-medium')
 
       if (props.size === 'xs') classes.push('text-xs')
       else if (props.size === 'sm') classes.push('text-sm')

package/src/components/inputFooter/theme/InputFooter.base.theme.ts

@@ -2,7 +2,7 @@ import type { InputFooterTheme } from '../InputFooter.vue'
 
 const theme: InputFooterTheme = {
   classes: {
-    wrapper: 'min-h-[1.3rem] text-xs mt-1',
+    wrapper: 'text-xs mt-1',
     helperText: 'text-secondary-500 dark:text-secondary-400',
     errorText: 'text-error-500 dark:text-error-400',
   },

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

@@ -5,7 +5,7 @@ const theme: LabelTheme = {
     wrapper: ({ props }) => {
       const classes  = ['block relative align-bottom focus:outline-none']
 
-      if (props.isInsideForm) classes.push('mb-3')
+      if (props.isInsideForm) classes.push('mb-5')
       if (props.block) classes.push('w-full')
 
       return classes

package/src/components/modal/Modal.vue

@@ -89,7 +89,9 @@ watch(value, (val) => {
 
   if (val) {
     setTimeout(() => {
-      stopClickOutside = onClickOutside(modalRef, clickOutsideCallback)
+      stopClickOutside = onClickOutside(modalRef, clickOutsideCallback, {
+        ignore: ['.v-popper__popper'],
+      })
     })
   }
 })
@@ -187,7 +189,7 @@ defineExpose({ open, close })
           role="dialog"
           aria-modal="true"
           aria-labelledby="modal-headline"
-          @submit="$emit('submit')"
+          @submit="(isValid: boolean) => $emit('submit', isValid)"
         >
           <slot name="image"></slot>
           <div v-if="hasHeader" :class="classes.header">

package/src/components/notifications/Notifications.vue

@@ -292,6 +292,7 @@ defineExpose({ log, info, success, warn, warning: warn, error })
           <x-spacer/>
           <button
             v-if="notification.action"
+            type="button"
             class="
                 ml-3
                 font-medium

package/src/components/popover/Popover.vue

@@ -33,10 +33,10 @@ const popoverProps = {
   popperShowTriggers: [Array, Function] as PropType<Array<PopoverTriggerEvent> | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>,
   popperHideTriggers: [Array, Function] as PropType<Array<PopoverTriggerEvent> | ((triggers: Array<PopoverTriggerEvent>) => Array<PopoverTriggerEvent>)>,
   container: {
-    type: [String, Object, Element, Boolean],
+    type: [String, Object, Boolean],
     default: 'body',
   },
-  boundary: [String, Element],
+  boundary: [String, Object],
   strategy: {
     type: String as PropType<'absolute' | 'fixed'>,
     default: 'absolute',

package/src/components/radio/theme/Radio.base.theme.ts

@@ -5,7 +5,7 @@ const theme: RadioTheme = {
     wrapper: ({ data }) => {
       const classes = ['inline-block relative cursor-pointer focus:outline-none group']
 
-      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-3')
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-5')
 
       return classes
     },
@@ -33,8 +33,10 @@ const theme: RadioTheme = {
       return c
     },
 
-    label: ({ props }) => {
-      let c = 'font-medium text-secondary-800 dark:text-secondary-200 pl-2'
+    label: ({ props, data }) => {
+      let c = 'text-secondary-800 dark:text-secondary-200 pl-2'
+
+      c += data.isInsideFormGroup ? ' font-normal' : ' font-medium'
 
       if (props.size === 'xs') c += ' text-xs'
       else if (props.size === 'sm') c += ' text-sm'

package/src/components/scroll/Scroll.vue

@@ -50,7 +50,7 @@ defineExpose({ scrollEl: scrollEl as Ref<HTMLElement | null> })
 
 <template>
   <div
-    class="flex relative overflow-hidden"
+    class="flex relative overflow-hidden max-w-full max-h-full"
     :style="styles"
     :class="[
       className,

package/src/components/stepper/Stepper.vue

@@ -114,6 +114,7 @@ const { styles, classes, className } = useTheme('Stepper', {}, props)
             :is="interactive ? 'button' : 'div'"
             v-for="(step, index) in steps"
             :key="index"
+            :type="interactive ? 'button' : undefined"
             :class="[classes.step, {
               'cursor-pointer': interactive && !step.disabled,
               'text-secondary-400 dark:text-secondary-600': step.disabled,

package/src/components/tab/Tab.vue

@@ -121,6 +121,7 @@ const { styles, classes, className } = useTheme('Tab', {}, ref({
   <component
     :is="to ? XLink : tag"
     ref="elRef"
+    :type="tag === 'button' ? 'button' : undefined"
     :data-value="computedValue"
     :to="to"
     :color="selected ? color : undefined"

package/src/components/table/Table.vue

@@ -227,7 +227,7 @@ const { styles, classes, className } = useTheme('Table', {}, props)
             @click="$emit('click-row', item)"
           >
             <x-table-cell v-if="expandable" width="48" class="!p-1">
-              <button class="p-4" @click="internalItems[index].__expanded = !internalItems[index].__expanded">
+              <button type="button" class="p-4" @click="internalItems[index].__expanded = !internalItems[index].__expanded">
                 <x-icon
                   :icon="chevronDownIcon"
                   :size="dense ? 'xs' : 'md'"

package/src/create.ts

@@ -1,16 +1,23 @@
-import type { App } from 'vue'
+import type { App, InjectionKey, MaybeRef } from 'vue'
 import { injectIconsKey, injectOptionsKey, injectThemeKey } from './composables/keys'
 import { injectThemeStyles, type UITheme } from './theme'
+import type { IconInjection } from './components/icon/Icon.vue'
 
 export type UIOptions = {
   prefix?: string;
   components?: any[];
   icons?: Record<string, any>;
   theme?: UITheme;
+  injectIconsKey?: InjectionKey<IconInjection>;
+  injectOptionsKey?: InjectionKey<UIOptions>;
+  injectThemeKey?: InjectionKey<MaybeRef<UITheme>>;
 }
 
 const defaultOptions: UIOptions = {
   prefix: 'X',
+  injectIconsKey,
+  injectOptionsKey,
+  injectThemeKey,
 }
 
 const create = (createOptions: UIOptions = {}) => {
@@ -28,9 +35,9 @@ const create = (createOptions: UIOptions = {}) => {
         if (!app.component(`${options.prefix}${name}`)) app.component(`${options.prefix}${name}`, component)
       })
 
-    app.provide(injectOptionsKey, options)
-    app.provide(injectIconsKey, options.icons || {})
-    app.provide(injectThemeKey, options.theme || {})
+    app.provide(installOptions.injectOptionsKey || injectOptionsKey, options)
+    app.provide(installOptions.injectIconsKey || injectIconsKey, options.icons || {})
+    app.provide(installOptions.injectThemeKey || injectThemeKey, options.theme || {})
 
     if (options.theme?.styles) injectThemeStyles(options.theme.name || '', options.theme.styles)
   }

package/src/themes/base/index.ts

@@ -1,10 +1,10 @@
 import type { UITheme } from '../../theme'
 import * as components from './components'
-import rawStyles from './styles.css?raw'
+import styles from './styles'
 
 const theme: UITheme = {
   name: 'Base',
-  styles: `${rawStyles}`,
+  styles,
   classPrefix: 'x-',
   components,
 }

package/{lib/themes/base/styles.css.js → src/themes/base/styles.ts}

@@ -1,4 +1,4 @@
-const o = `/* stylelint-disable value-keyword-case */
+export default `
 html {
   color: #111827;
   background-color: white;
@@ -85,7 +85,4 @@ body {
   --error-color-900: 127, 29, 29;
   --error-color-950: 69, 10, 10;
 }
-`;
-export {
-  o as default
-};
+`

package/src/themes/carbon/index.ts

@@ -1,13 +1,13 @@
 import type { UITheme } from '../../theme'
 import * as components from './components'
-import rawStyles from './styles.css?raw'
+import styles from './styles'
 
 const theme: UITheme = {
   name: 'Carbon',
   colors: {
     primary: { '50': '#eff6ff', '100': '#dbeafe', '200': '#bfdbfe', '300': '#93c5fd', '400': '#60a5fa', '500': '#3b82f6', '600': '#2563eb', '700': '#1d4ed8', '800': '#1e40af', '900': '#1e3a8a', '950': '#172554' },
   },
-  styles: `${rawStyles}`,
+  styles,
   classPrefix: 'x-',
   components,
 }

package/src/themes/carbon/{styles.css → styles.ts}

@@ -1,3 +1,4 @@
+export default `
 html {
   color: #111827;
   background-color: white;
@@ -80,3 +81,4 @@ html.dark {
   --error-color-900: 127, 29, 29;
   --error-color-950: 69, 10, 10;
 }
+`

package/src/version.ts

@@ -1 +1 @@
-export default '1.5.0'
+export default '1.5.2'