@indielayer/ui 1.3.0 → 1.4.0

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/Form.vue

@@ -13,6 +13,12 @@ const formProps = {
     type: [Array, Object] as PropType<[FormError[], FormError]>,
     default: () => ([]),
   },
+  title: String,
+  description: String,
+  hasFooter: {
+    type: Boolean,
+    default: true,
+  },
 }
 
 export type FormProps = ExtractPublicPropTypes<typeof formProps>
@@ -35,12 +41,11 @@ export type FormInput = {
   setError: (val: string) => void;
 }
 
-type InternalClasses = 'wrapper'
+type InternalClasses = 'wrapper' | 'content' | 'title' | 'description' | 'footer'
 export interface FormTheme extends ThemeComponent<FormProps, InternalClasses> {}
 
 export default {
   name: 'XForm',
-  inheritAttrs: false,
 }
 </script>
 
@@ -73,8 +78,10 @@ provide(injectFormKey, {
   isInsideForm: true,
 })
 
-onMounted(() => {
-  if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus()
+onMounted(async () => {
+  if (props.autoFocus && inputs && inputs.length > 0) {
+    setTimeout(inputs[0].focus, 50)
+  }
 })
 
 watch(() => props.errors, (errors) => {
@@ -131,8 +138,22 @@ const { styles, classes, className } = useTheme('Form', {}, props)
     ]"
     @submit="submit"
   >
-    <fieldset :disabled="disabled">
+    <slot name="header">
+      <div v-if="title || description" class="mb-10">
+        <p v-if="title" :class="classes.title">{{ title }}</p>
+        <p v-if="description" :class="classes.description">{{ description }}</p>
+      </div>
+    </slot>
+
+    <fieldset :disabled="disabled" :class="classes.content">
       <slot></slot>
     </fieldset>
+
+    <slot v-if="hasFooter" name="footer">
+      <div :class="classes.footer">
+        <slot name="primary-action"></slot>
+        <slot name="secondary-action"></slot>
+      </div>
+    </slot>
   </form>
 </template>

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

@@ -2,7 +2,15 @@ import type { FormTheme } from '../Form.vue'
 
 const theme: FormTheme = {
   classes: {
-    wrapper: '',
+    wrapper: 'relative',
+
+    content: '',
+
+    title: 'text-xl mb-1',
+
+    description: 'text-gray-500',
+
+    footer: 'space-x-4 mt-4',
   },
 }
 

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

@@ -1,7 +1,17 @@
 import type { FormTheme } from '../Form.vue'
 
-import BaseTheme from './Form.base.theme'
+const theme: FormTheme = {
+  classes: {
+    wrapper: 'relative',
 
-const theme: FormTheme = BaseTheme
+    content: 'grid',
+
+    title: 'text-xl mb-1',
+
+    description: 'text-gray-500',
+
+    footer: 'grid grid-cols-2 gap-4 lg:flex mt-8',
+  },
+}
 
 export default theme

package/src/components/formGroup/FormGroup.vue

@@ -0,0 +1,116 @@
+<script lang="ts">
+const formGroupProps = {
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+}
+
+export type FormGroupProps = ExtractPublicPropTypes<typeof formGroupProps>
+
+export type FormGroupInjection = {
+  registerInputGroup: (name: string, focus: () => void) => void;
+  unregisterInputGroup: (name: string) => void;
+  setValue: (val: string | number | string[] | number[]) => void;
+  value: MaybeRef<string | number | string[] | number[] | null | undefined>;
+  isInsideFormGroup: boolean;
+}
+
+export type FormGroupInput = {
+  name: string;
+  focus: () => void;
+}
+
+type InternalClasses = 'wrapper'
+export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses> {}
+
+export default {
+  name: 'XFormGroup',
+}
+</script>
+
+<script setup lang="ts">
+import { provide, computed, type ExtractPublicPropTypes, type MaybeRef } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
+import { injectFormGroupKey } from '../../composables/keys'
+
+import XLabel from '../label/Label.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
+
+const props = defineProps(formGroupProps)
+
+const inputs: FormGroupInput[] = []
+
+const value = computed<string | number | string[] | number[]>(() => {
+  if (typeof props.modelValue === 'string') return props.modelValue
+  if (typeof props.modelValue === 'number') return props.modelValue
+  if (Array.isArray(props.modelValue)) return props.modelValue
+
+  return ''
+})
+
+provide(injectFormGroupKey, {
+  registerInputGroup: (name: string, focus: () => void) => {
+    inputs.push({ name, focus })
+  },
+  unregisterInputGroup: (name: string) => {
+    const index = inputs.findIndex((i) => i.name === name)
+
+    inputs.splice(index, 1)
+  },
+  setValue: (val) => {
+    emit('update:modelValue', val)
+  },
+  isInsideFormGroup: true,
+  value,
+})
+
+function focus() {
+  inputs[0]?.focus()
+}
+
+const emit = defineEmits(useInputtable.emits())
+
+const {
+  errorInternal,
+  isInsideForm,
+  isFirstValidation,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit })
+
+const listeners = {
+  change: (event: Event) => {
+    if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+  },
+}
+
+const { styles, classes, className } = useTheme('FormGroup', {}, props, { errorInternal })
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <x-label
+    tag="fieldset"
+    :style="styles"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
+    :class="[
+      className,
+    ]"
+    v-on="listeners"
+  >
+    <div :class="classes.wrapper">
+      <slot></slot>
+    </div>
+    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+  </x-label>
+</template>

package/src/components/formGroup/__tests__/FormGroup.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FormGroup from '../FormGroup.vue'
+
+describe('FormGroup', () => {
+  it('renders without errors', () => {
+    const wrapper = mount(FormGroup)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/formGroup/index.ts

@@ -0,0 +1,2 @@
+export { default as XFormGroup } from './FormGroup.vue'
+export type { FormGroupProps, FormGroupInjection, FormGroupInput, FormGroupTheme } from './FormGroup.vue'

package/src/components/formGroup/theme/FormGroup.base.theme.ts

@@ -0,0 +1,16 @@
+import type { FormGroupTheme } from '../FormGroup.vue'
+
+const theme: FormGroupTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['']
+
+      if (!props.vertical) classes.push('flex gap-2')
+      else classes.push('grid gap-1')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/formGroup/theme/FormGroup.carbon.theme.ts

@@ -0,0 +1,16 @@
+import type { FormGroupTheme } from '../FormGroup.vue'
+
+const theme: FormGroupTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['']
+
+      if (!props.vertical) classes.push('flex gap-4')
+      else classes.push('grid gap-3')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/icon/theme/Icon.base.theme.ts

@@ -3,7 +3,7 @@ import type { IconTheme } from '../Icon.vue'
 const theme: IconTheme = {
   classes: {
     wrapper: ({ props }) => {
-      const classes = 'inline'
+      const classes = 'inline shrink-0'
 
       if (props.size === 'xs') return classes + ' h-3 w-3'
       else if (props.size === 'sm') return classes + ' h-4 w-4'

package/src/components/icon/theme/Icon.carbon.theme.ts

@@ -3,12 +3,11 @@ import type { IconTheme } from '../Icon.vue'
 const theme: IconTheme = {
   classes: {
     wrapper: ({ props }) => {
-      const classes = 'inline'
+      const classes = 'inline shrink-0'
 
       if (props.size === 'xs') return classes + ' h-3 w-3'
-      else if (props.size === 'sm') return classes + ' h-4 w-4'
-      else if (props.size === 'lg') return classes + ' h-6 w-6'
-      else if (props.size === 'xl') return classes + ' h-9 w-9'
+      else if (props.size === 'lg') return classes + ' h-5 w-5'
+      else if (props.size === 'xl') return classes + ' h-8 w-8'
 
       return classes + ' h-4 w-4'
     },

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export * from './accordion'
 export * from './alert'
 export * from './avatar'
 export * from './badge'
@@ -6,11 +7,11 @@ export * from './button'
 export * from './card'
 export * from './carousel'
 export * from './checkbox'
-export * from './collapse'
 export * from './container'
 export * from './divider'
 export * from './drawer'
 export * from './form'
+export * from './formGroup'
 export * from './icon'
 export * from './image'
 export * from './input'
@@ -31,6 +32,7 @@ export * from './skeleton'
 export * from './slider'
 export * from './spacer'
 export * from './spinner'
+export * from './stepper'
 export * from './tab'
 export * from './table'
 export * from './tag'

package/src/components/input/Input.vue

@@ -8,8 +8,6 @@ const inputProps = {
     type: Boolean,
     default: true,
   },
-  helper: String,
-  label: String,
   dir: {
     type: String as PropType<'ltr' | 'rtl'>,
     default: 'ltr',
@@ -91,6 +89,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   isInsideForm,
   inputListeners,
   reset,
@@ -128,6 +127,7 @@ defineExpose({ focus, blur, reset, validate, setError })
       </slot>
 
       <input
+        :id="id"
         ref="elRef"
         :class="[
           classes.input,
@@ -176,6 +176,6 @@ defineExpose({ focus, blur, reset, validate, setError })
       </slot>
     </div>
 
-    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
   </x-label>
 </template>

package/src/components/input/theme/Input.carbon.theme.ts

@@ -18,7 +18,7 @@ const theme: InputTheme = {
       } else if (props.readonly) {
         classes.push('bg-white dark:bg-gray-900 text-gray-700')
       } else {
-        classes.push('bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
+        classes.push('bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-200')
       }
 
       return classes

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-[1rem] text-sm mt-1',
+    wrapper: 'min-h-[1.3rem] text-sm mt-1',
     helperText: 'text-gray-500 dark:text-gray-400',
     errorText: 'text-red-500 dark:text-red-400',
   },

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

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

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

@@ -1,10 +1,15 @@
 import type { LabelTheme } from '../Label.vue'
 
-import BaseTheme from './Label.base.theme'
-
 const theme: LabelTheme = {
   classes: {
-    wrapper: BaseTheme.classes?.wrapper,
+    wrapper: ({ props }) => {
+      const classes  = ['block relative align-bottom focus:outline-none']
+
+      if (props.isInsideForm) classes.push('mb-8')
+      if (props.block) classes.push('w-full')
+
+      return classes
+    },
 
     label: 'text-xs text-gray-500 dark:text-gray-200 mb-2',
   },

package/src/components/link/Link.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
 const linkProps = {
-  ...useColors.props(),
+  ...useColors.props('primary'),
   tag: {
     type: String,
     default: 'a',

package/src/components/link/theme/Link.carbon.theme.ts

@@ -1,7 +1,28 @@
 import type { LinkTheme } from '../Link.vue'
 
-import BaseTheme from './Link.base.theme'
+const theme: LinkTheme = {
+  classes: {
+    wrapper: 'transition duration-300 ease-in-out cursor-pointer inline-flex text-sm',
+  },
 
-const theme: LinkTheme = BaseTheme
+  styles: ({ colors, props, css }) => {
+    const color = colors.getPalette(props.color || 'gray')
+
+    return css.variables({
+      text: props.color ? color[600] : '',
+      hover: {
+        text: !props.shadow ? color[700] : '',
+      },
+      shadow: color[100],
+      dark: {
+        text: props.color ? color[400] : '',
+        hover: {
+          text: color[300],
+        },
+        shadow: color[900],
+      },
+    })
+  },
+}
 
 export default theme

package/src/components/loader/theme/Loader.carbon.theme.ts

@@ -5,7 +5,7 @@ const theme: LoaderTheme = {
     wrapper: 'inline-flex items-center justify-center',
     iconSuccess: 'text-green-500',
     iconError: 'text-red-500',
-    label: 'mx-1 text-sm',
+    label: 'mx-2 text-sm',
   },
 }
 

package/src/components/menu/Menu.vue

@@ -65,12 +65,12 @@ import { useColors } from '../../composables/useColors'
 import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XMenuItem from './MenuItem.vue'
-import XCollapse from '../../components/collapse/Collapse.vue'
+import XAccordionItem from '../../components/accordion/AccordionItem.vue'
 import XDivider from '../../components/divider/Divider.vue'
 
 const props = defineProps(menuProps)
 
-defineEmits(['expand'])
+defineEmits(['expand', 'item-click'])
 
 const { styles, classes, className } = useTheme('Menu', {}, props)
 </script>
@@ -87,7 +87,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
   >
     <template v-for="(item, index) in items" :key="index">
       <template v-if="item.items">
-        <x-collapse
+        <x-accordion-item
           v-if="item.collapsible !== false"
           :icon="item.collapseIcon || collapseIcon"
           :expanded="item.expanded || expanded"
@@ -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 }">
@@ -121,9 +121,10 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
               :rounded="rounded"
               :filled="filled"
               @expand="expand(false)"
+              @item-click="$emit('item-click')"
             />
           </template>
-        </x-collapse>
+        </x-accordion-item>
         <template v-else>
           <x-menu-item
             :item="item"
@@ -134,6 +135,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
             :disabled="disabled || item.disabled"
             class="font-medium"
             inactive
+            @click="$emit('item-click')"
           />
           <x-menu
             class="x-menu-inner space-y-1 ml-4 border-l border-gray-100 dark:border-gray-700"
@@ -162,6 +164,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
           :size="item.size || size"
           :disabled="disabled || item.disabled"
           :class="{ 'my-2': item.divider }"
+          @click="$emit('item-click')"
           @active="$emit('expand')"
         />
       </template>

package/src/components/menu/MenuItem.vue

@@ -128,7 +128,7 @@ const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, {
     ref="elRef"
     v-bind="computedProps.attrs"
     :to="computedProps.to"
-    :href="computedProps.href"
+    :href="computedProps.href || computedProps.to || ''"
     :target="computedProps.target"
     :color="computedProps.color"
     :style="styles"

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

@@ -44,10 +44,10 @@ const theme: MenuItemTheme = {
             text: color[500],
           },
           dark: {
-            bg: props.selected ? color[800] : color[700],
+            bg: props.selected ? color[700] : color[700],
             text: color[100],
             hover: {
-              bg: props.selected ? color[800] : color[700],
+              bg: props.selected ? color[700] : color[700],
               text: color[100],
             },
           },
@@ -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],
           },
         },