@indielayer/ui 0.0.0-dev-20240127005325 → 0.0.0-dev-20240202140555

package/lib/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.0.0-dev-20240127005325";
+declare const _default: "0.0.0-dev-20240202140555";
 export default _default;

package/lib/version.js

@@ -1,4 +1,4 @@
-const e = "0.0.0-dev-20240127005325";
+const e = "0.0.0-dev-20240202140555";
 export {
   e as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "0.0.0-dev-20240127005325",
+  "version": "0.0.0-dev-20240202140555",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -20,6 +20,7 @@
   "files": [
     "lib",
     "src",
+    "docs",
     "*.d.ts",
     "exports",
     "README.md"
@@ -34,6 +35,7 @@
       "require": "./lib/index.umd.js",
       "types": "./lib/index.d.ts"
     },
+    "./docs/*": "./docs/*",
     "./nuxt": "./exports/nuxt.mjs",
     "./nuxt.plugin": "./exports/nuxt.plugin.js",
     "./nuxt.plugin.js": "./exports/nuxt.plugin.js",
@@ -64,7 +66,7 @@
     "jsdom": "^22.1.0",
     "postcss": "^8.4.4",
     "rollup-plugin-visualizer": "^5.9.2",
-    "shiki": "^0.14.3",
+    "shiki": "1.0.0-beta.1",
     "stylelint": "^14.16.1",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.2.2",

package/src/components/accordion/Accordion.vue

@@ -16,6 +16,10 @@ const accordionProps = {
 
 export type AccordionProps = ExtractPublicPropTypes<typeof accordionProps>
 
+export type AccordionInjection = AccordionProps & {
+  isInsideAccordion: boolean;
+}
+
 type InternalClasses = 'wrapper'
 export interface AccordionTheme extends ThemeComponent<AccordionProps, InternalClasses> {}
 
@@ -33,7 +37,7 @@ import { injectAccordionKey } from '../../composables/keys'
 
 const props = defineProps(accordionProps)
 
-provide(injectAccordionKey, props)
+provide(injectAccordionKey, { ...props, isInsideAccordion: true })
 
 const { styles, classes, className } = useTheme('Accordion', {}, props)
 </script>

package/src/components/accordion/AccordionItem.vue

@@ -24,6 +24,7 @@ export type AccordionItemProps = ExtractPublicPropTypes<typeof accordionItemProp
 type InternalClasses = 'wrapper' | 'icon' | 'content'
 type InternalData = {
   collapsed: boolean;
+  isInsideAccordion: boolean;
 }
 export interface AccordionItemTheme extends ThemeComponent<AccordionItemProps, InternalClasses, InternalData> {}
 
@@ -46,7 +47,9 @@ const props = defineProps(accordionItemProps)
 
 const emit = defineEmits(['expand'])
 
-const accordionProps = inject(injectAccordionKey, {})
+const accordionProps = inject(injectAccordionKey, {
+  isInsideAccordion: false,
+})
 
 const computedIconAlign = computed(() => accordionProps.iconAlign || props.iconAlign)
 const computedProps = reactive({
@@ -127,7 +130,7 @@ function onExpand(anim = true) {
 const { styles, classes, className } = useTheme('AccordionItem', {}, {
   ...props,
   ...computedProps,
-}, { collapsed })
+}, { collapsed, isInsideAccordion: accordionProps.isInsideAccordion })
 
 defineExpose({ toggle, open, close })
 </script>

package/src/components/accordion/index.ts

@@ -1,4 +1,4 @@
 export { default as XAccordion } from './Accordion.vue'
-export type { AccordionProps, AccordionTheme } from './Accordion.vue'
+export type { AccordionProps, AccordionInjection, AccordionTheme } from './Accordion.vue'
 export { default as XAccordionItem } from './AccordionItem.vue'
 export type { AccordionItemProps, AccordionItemTheme } from './AccordionItem.vue'

package/src/components/accordion/theme/Accordion.carbon.theme.ts

@@ -1,9 +1,7 @@
 import type { AccordionTheme } from '../Accordion.vue'
 
-const theme: AccordionTheme = {
-  classes: {
-    wrapper: 'grid grid-cols-1 divide-y border-b border-t',
-  },
-}
+import BaseTheme from './Accordion.base.theme'
+
+const theme: AccordionTheme = BaseTheme
 
 export default theme

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

@@ -2,28 +2,31 @@ import type { AccordionItemTheme } from '../AccordionItem.vue'
 
 const theme: AccordionItemTheme = {
   classes: {
-    wrapper: ({ props, slots }) => {
+    wrapper: ({ props, slots, data }) => {
       const classes = ['relative flex items-center w-full text-left']
 
+      if (!data.isInsideAccordion) return classes
+
       if (slots.default) {
-        classes.push('px-4 py-2')
-        if (!props.disabled) classes.push('hover:bg-gray-50 dark:hover:bg-gray-800')
+        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-gray-50 dark:hover:bg-gray-600')
       }
 
-      if (props.iconAlign === 'left') classes.push('flex-row-reverse')
-
       if (!props.disabled) classes.push('cursor-pointer')
 
       return classes
     },
 
     icon: ({ props, data }) => {
-      const classes = ['flex transform transition-transform duration-150']
+      const classes = ['absolute flex transform transition-transform duration-150']
 
       if (!data.collapsed) classes.push('rotate-180')
       if (props.disabled) classes.push('text-gray-300')
 
-      if (props.iconAlign === 'left') classes.push('mr-4')
+      if (props.iconAlign === 'left') classes.push('left-2')
+      else classes.push('right-2')
 
       return classes
     },

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

@@ -1,35 +1,7 @@
 import type { AccordionItemTheme } from '../AccordionItem.vue'
 
-const theme: AccordionItemTheme = {
-  classes: {
-    wrapper: ({ props, slots }) => {
-      const classes = ['relative flex items-center w-full text-left']
+import BaseTheme from './AccordionItem.base.theme'
 
-      if (slots.default) {
-        classes.push('px-4 py-2')
-        if (!props.disabled) classes.push('hover:bg-gray-50 dark:hover:bg-gray-800')
-      }
-
-      if (props.iconAlign === 'left') classes.push('flex-row-reverse')
-
-      if (!props.disabled) classes.push('cursor-pointer')
-
-      return classes
-    },
-
-    icon: ({ props, data }) => {
-      const classes = ['flex transform transition-transform duration-150']
-
-      if (!data.collapsed) classes.push('rotate-180')
-      if (props.disabled) classes.push('text-gray-300')
-
-      if (props.iconAlign === 'left') classes.push('mr-4')
-
-      return classes
-    },
-
-    content: 'px-4 pt-2 pb-6 transition-[height] duration-150 overflow-y-hidden',
-  },
-}
+const theme: AccordionItemTheme = BaseTheme
 
 export default theme

package/src/components/carousel/CarouselSlide.vue

@@ -1,5 +1,10 @@
 <script lang="ts">
-const carouselSlideProps = {}
+const carouselSlideProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+}
 
 export type CarouselSlideProps = ExtractPublicPropTypes<typeof carouselSlideProps>
 
@@ -8,7 +13,6 @@ export interface CarouselSlideTheme extends ThemeComponent<CarouselSlideProps, I
 
 export default {
   name: 'XCarouselSlide',
-  validators: {},
 }
 </script>
 
@@ -22,7 +26,8 @@ const { styles, classes, className } = useTheme('CarouselSlide', {}, props)
 </script>
 
 <template>
-  <div
+  <component
+    :is="tag"
     :style="styles"
     :class="[
       className,
@@ -31,7 +36,7 @@ const { styles, classes, className } = useTheme('CarouselSlide', {}, props)
     ]"
   >
     <slot></slot>
-  </div>
+  </component>
 </template>
 
 <style lang="postcss" scoped module>

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) classes.push('mb-3')
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-3')
 
       return classes
     },

package/src/components/container/Container.vue

@@ -4,6 +4,10 @@ const containerProps = {
     type: String,
     default: 'div',
   },
+  fluid: {
+    type: Boolean,
+    default: false,
+  },
 }
 
 export type ContainerProps = ExtractPublicPropTypes<typeof containerProps>

package/src/components/container/theme/Container.base.theme.ts

@@ -2,7 +2,13 @@ import type { ContainerTheme } from '../Container.vue'
 
 const theme: ContainerTheme = {
   classes: {
-    wrapper: 'max-w-screen-2xl mx-auto px-4 md:px-8',
+    wrapper: ({ props }) => {
+      const classes = ['px-4 md:px-8']
+
+      if (!props.fluid) classes.push('max-w-screen-2xl mx-auto')
+
+      return classes
+    },
   },
 }
 

package/src/components/form/theme/Form.base.theme.ts

@@ -4,7 +4,7 @@ const theme: FormTheme = {
   classes: {
     wrapper: 'relative',
 
-    content: 'grid gap-4',
+    content: '',
 
     title: 'text-xl mb-1',
 

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

@@ -1,7 +1,5 @@
 import type { LabelTheme } from '../Label.vue'
 
-import BaseTheme from './Label.base.theme'
-
 const theme: LabelTheme = {
   classes: {
     wrapper: ({ props }) => {

package/src/components/menu/Menu.vue

@@ -104,7 +104,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
               :filled="item.filled || filled"
               :size="item.size || size"
               :disabled="disabled || item.disabled"
-              class="pr-10 font-medium"
+              class="font-medium"
             />
           </template>
           <template #content="{ expand }">

package/src/components/menu/theme/MenuItem.base.theme.ts

@@ -65,7 +65,7 @@ const theme: MenuItemTheme = {
           bg: props.selected ? gray[800] : 'transparent',
           text: gray[200],
           hover: {
-            bg: gray[800],
+            bg: gray[600],
             text: gray[100],
           },
         },

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) classes.push('mb-3')
+      if (data.isInsideForm && !data.isInsideFormGroup) classes.push('mb-3')
 
       return classes
     },

package/src/components/select/Select.vue

@@ -357,10 +357,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       <x-popover
         v-else
         ref="popoverRef"
-        block
         :disabled="disabled || loading || readonly"
-        :dismiss-on-click="!multiple"
-        align="left"
       >
         <div
           :class="[classes.box]"

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

@@ -27,7 +27,7 @@ const theme: SelectTheme = {
       return classes
     },
 
-    content: 'py-1 max-h-72 overflow-scroll',
+    content: 'py-1 max-h-72 overflow-y-auto',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 

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

@@ -30,7 +30,7 @@ const theme: SelectTheme = {
       return classes
     },
 
-    content: 'py-1 max-h-72 overflow-scroll',
+    content: 'py-1 max-h-72 overflow-y-auto',
 
     iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
 

package/src/components/slider/theme/Slider.carbon.theme.ts

@@ -4,7 +4,7 @@ const theme: SliderTheme = {
   classes: {
     wrapper: '',
 
-    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900',
+    drag: 'w-[16px] h-[16px] -mt-[11px] -ml-[8px] rounded-full bg-gray-900 dark:bg-gray-100',
   },
 
   styles: ({ props, colors, css }) => {

package/src/components/tab/Tab.vue

@@ -171,7 +171,7 @@ const { styles, classes, className } = useTheme('Tab', {}, ref({
       </div>
     </slot>
     <teleport v-if="selected && teleportTo" :to="teleportTo">
-      <div role="tabpanel" :class="classes.tabpanel">
+      <div v-if="$slots.default" role="tabpanel" :class="classes.tabpanel">
         <slot></slot>
       </div>
     </teleport>

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

@@ -31,7 +31,7 @@ const theme: TabGroupTheme = {
 
       if (props.variant === 'line') c.push('h-[2px] -mt-[2px] bg-[color:var(--x-tab-group-text)] dark:bg-[color:var(--x-tab-group-dark-text)]')
 
-      if (props.variant === 'block') c.push('border-t-2 border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-gray-100 dark:bg-gray-700')
+      if (props.variant === 'block') c.push('border-t-2 border-solid border-[color:var(--x-tab-group-text)] dark:border-[color:var(--x-tab-group-dark-text)] h-full top-0 bg-gray-100 dark:bg-gray-700')
 
       return c
     },

package/src/components/table/Table.vue

@@ -252,7 +252,7 @@ const { styles, classes, className } = useTheme('Table', {}, props)
           </x-table-row>
           <tr v-if="expandable">
             <td colspan="999">
-              <div class="overflow-hidden" :class="[internalItems[index]?.__expanded ? '' : 'max-h-0']">
+              <div class="overflow-hidden transition-opacity" :class="[internalItems[index]?.__expanded ? '' : 'opacity-0 max-h-0']">
                 <slot name="expanded-row" :item="item"></slot>
               </div>
             </td>

package/src/composables/keys.ts

@@ -5,7 +5,7 @@ import type { ButtonGroupInjection } from '../components/button/ButtonGroup.vue'
 import type { NotificationInjection } from '../components/notifications/Notifications.vue'
 import type { IconInjection } from '../components/icon/Icon.vue'
 import type { FormGroupInjection } from '../components/formGroup'
-import type { AccordionProps } from '../components/accordion'
+import type { AccordionInjection } from '../components/accordion'
 import type { UIOptions } from '../create'
 import type { UITheme } from '../theme'
 
@@ -17,4 +17,4 @@ export const injectFormGroupKey = Symbol() as InjectionKey<FormGroupInjection>
 export const injectIconsKey = Symbol() as InjectionKey<IconInjection>
 export const injectButtonGroupKey = Symbol() as InjectionKey<ButtonGroupInjection>
 export const injectNotificationKey = Symbol() as InjectionKey<NotificationInjection>
-export const injectAccordionKey = Symbol() as InjectionKey<AccordionProps>
+export const injectAccordionKey = Symbol() as InjectionKey<AccordionInjection>

package/src/version.ts

@@ -1 +1 @@
-export default '0.0.0-dev-20240127005325'
+export default '0.0.0-dev-20240202140555'