@indielayer/ui 1.1.0 → 1.3.0

package/src/components/input/Input.vue

@@ -31,6 +31,10 @@ const inputProps = {
 
 export type InputProps = ExtractPublicPropTypes<typeof inputProps>
 
+type InternalClasses = 'wrapper' | 'input' | 'icon'
+type InternalExtraData = { errorInternal: any; }
+export interface InputTheme extends ThemeComponent<InputProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XInput',
   validators: {
@@ -41,17 +45,16 @@ export default {
 
 <script setup lang="ts">
 import { ref, type PropType, type ExtractPublicPropTypes, watch } from 'vue'
-import { useTheme } from '../../composables/theme'
-import { useColors } from '../../composables/colors'
-import { useCommon } from '../../composables/common'
-import { useInputtable } from '../../composables/inputtable'
-import { useInteractive } from '../../composables/interactive'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useColors } from '../../composables/useColors'
+import { useCommon } from '../../composables/useCommon'
+import { useInputtable } from '../../composables/useInputtable'
+import { useInteractive } from '../../composables/useInteractive'
 import { eyeIcon, eyeVisibleIcon } from '../../common/icons'
 
+import XLabel from '../label/Label.vue'
 import XIcon from '../icon/Icon.vue'
-import XInputError from '../helpers/InputError'
-
-import theme from './Input.theme'
+import XInputFooter from '../inputFooter/InputFooter.vue'
 
 const props = defineProps(inputProps)
 
@@ -95,35 +98,34 @@ const {
   setError,
 } = useInputtable(props, { focus, emit })
 
-const { styles, classes, className } = useTheme('input', theme, props, { errorInternal })
+const { styles, classes, className } = useTheme('Input', {}, props, { errorInternal })
 
 defineExpose({ focus, blur, reset, validate, setError })
 </script>
 
 <template>
-  <label
+  <x-label
     :style="styles"
-    class="relative"
+    :block="block"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
     :class="[
       className,
       classes.wrapper,
-      { 'mb-3': isInsideForm, 'w-full': block }
     ]"
   >
-    <p
-      v-if="label"
-      :class="classes.label"
-      v-text="label"
-    ></p>
-
     <div class="relative">
-      <x-icon
-        v-if="iconLeft"
-        :size="size"
-        :icon="iconLeft"
-        class="ml-2 left-1"
-        :class="classes.icon"
-      />
+      <slot name="prefix">
+        <x-icon
+          v-if="iconLeft"
+          :size="size"
+          :icon="iconLeft"
+          class="ml-2 left-1"
+          :class="classes.icon"
+        />
+      </slot>
 
       <input
         ref="elRef"
@@ -155,24 +157,25 @@ defineExpose({ focus, blur, reset, validate, setError })
         @change="onChange"
       />
 
-      <x-icon
-        v-if="iconRight"
-        :size="size"
-        :icon="iconRight"
-        class="mr-2 right-1"
-        :class="classes.icon"
-      />
-
-      <x-icon
-        v-else-if="type === 'password' && showPasswordToggle"
-        :size="size"
-        :icon="currentType === 'password' ? eyeIcon : eyeVisibleIcon"
-        class="mr-2 right-1 cursor-pointer"
-        :class="classes.icon"
-        @click="togglePasswordVisibility()"
-      />
+      <slot name="suffix">
+        <x-icon
+          v-if="iconRight"
+          :size="size"
+          :icon="iconRight"
+          class="mr-2 right-1"
+          :class="classes.icon"
+        />
+        <x-icon
+          v-else-if="type === 'password' && showPasswordToggle"
+          :size="size"
+          :icon="currentType === 'password' ? eyeIcon : eyeVisibleIcon"
+          class="mr-2 right-1 cursor-pointer"
+          :class="classes.icon"
+          @click="togglePasswordVisibility()"
+        />
+      </slot>
     </div>
 
-    <x-input-error :error="errorInternal" :helper="helper"/>
-  </label>
+    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+  </x-label>
 </template>

package/src/components/input/index.ts

@@ -1,3 +1,2 @@
 export { default as XInput } from './Input.vue'
-export type { InputProps } from './Input.vue'
-export type { InputTheme } from './Input.theme'
+export type { InputProps, InputTheme } from './Input.vue'

package/src/components/input/{Input.theme.ts → theme/Input.base.theme.ts}

@@ -1,28 +1,8 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { InputProps } from './Input.vue'
+import type { InputTheme } from '../Input.vue'
 
-type InternalClasses = 'wrapper' | 'label' | 'input' | 'icon'
-type InternalExtraData = { errorInternal: any; }
-
-interface InternalTheme extends ThemeComponent<InputProps, InternalClasses, InternalExtraData> {}
-export interface InputTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<InputProps, InternalClasses, InternalExtraData>>;
-}
-
-const theme: InternalTheme = {
+const theme: InputTheme = {
   classes: {
-    wrapper: 'inline-block align-bottom text-left',
-
-    label: ({ props }) => {
-      const classes = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
-
-      if (props.size === 'xs') return classes + ' text-xs'
-      else if (props.size === 'sm') return classes + ' text-sm'
-      else if (props.size === 'lg') return classes + ' text-lg'
-      else if (props.size === 'xl') return classes + ' text-xl'
-
-      return classes
-    },
+    wrapper: '',
 
     input: ({ props, data }) => {
       const classes = ['appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border shadow-sm rounded-md']

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

@@ -0,0 +1,37 @@
+import type { InputTheme } from '../Input.vue'
+
+const theme: InputTheme = {
+  classes: {
+    wrapper: '',
+
+    input: ({ props, data }) => {
+      const classes = ['appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out border-gray-300 dark:border-gray-700 border-b text-sm px-4']
+
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('py-1.5')
+      else if (props.size === 'lg' || props.size === 'xl') classes.push('py-3.5')
+      else classes.push('py-2.5')
+
+      if (props.disabled) {
+        classes.push('bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed')
+      } 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')
+      }
+
+      return classes
+    },
+
+    icon: 'text-gray-600 dark:text-gray-300 absolute my-auto inset-y-0',
+  },
+
+  styles: ({ colors, props, css }) => {
+    const color = colors.getPalette(props.color)
+
+    return css.get('border', color[400])
+  },
+}
+
+export default theme

package/src/components/inputFooter/InputFooter.vue

@@ -0,0 +1,29 @@
+<script lang="ts">
+const inputFooterProps = {
+  helper: String,
+  error: String,
+}
+
+export type InputFooterProps = ExtractPublicPropTypes<typeof inputFooterProps>
+
+type InternalClasses = 'wrapper' | 'helperText' | 'errorText'
+export interface InputFooterTheme extends ThemeComponent<InputFooterProps, InternalClasses> {}
+
+export default { name: 'XInputFooter' }
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(inputFooterProps)
+
+const { styles, classes, className } = useTheme('InputFooter', {}, props)
+</script>
+
+<template>
+  <div :class="[className, classes.wrapper]" :style="styles">
+    <p v-if="error" :class="classes.errorText">{{ error }}</p>
+    <p v-else-if="helper" :class="classes.helperText">{{ helper }}</p>
+  </div>
+</template>

package/src/components/inputFooter/__tests__/InputFooter.spec.ts

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

package/src/components/inputFooter/index.ts

@@ -0,0 +1,2 @@
+export { default as XInputFooter } from './InputFooter.vue'
+export type { InputFooterProps, InputFooterTheme } from './InputFooter.vue'

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

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

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

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

package/src/components/label/Label.vue

@@ -0,0 +1,54 @@
+<script lang="ts">
+const labelProps = {
+  ...useCommon.props(),
+  label: String,
+  disabled: Boolean,
+  required: Boolean,
+  block: Boolean,
+  isInsideForm: Boolean,
+  tag: {
+    type: String,
+    default: 'label',
+  },
+}
+
+export type LabelProps = ExtractPublicPropTypes<typeof labelProps>
+
+type InternalClasses = 'wrapper' | 'label'
+export interface LabelTheme extends ThemeComponent<LabelProps, InternalClasses> {}
+
+export default {
+  name: 'XLabel',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+
+const props = defineProps(labelProps)
+
+const { styles, classes, className } = useTheme('Label', {}, props)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :style="styles"
+    :class="[className, classes.wrapper]"
+  >
+    <component
+      :is="tag === 'fieldset' ? 'legend' : 'p'"
+      v-if="label"
+      :title="label"
+      :class="classes.label"
+    >
+      {{ label }}
+    </component>
+    <slot></slot>
+  </component>
+</template>

package/src/components/label/__tests__/Label.spec.ts

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

package/src/components/label/index.ts

@@ -0,0 +1,2 @@
+export { default as XLabel } from './Label.vue'
+export type { LabelProps, LabelTheme } from './Label.vue'

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

@@ -0,0 +1,27 @@
+import type { LabelTheme } from '../Label.vue'
+
+const theme: LabelTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes  = ['block relative align-bottom focus:outline-none']
+
+      if (props.isInsideForm) classes.push('mb-3')
+      if (props.block) classes.push('w-full')
+
+      return classes
+    },
+
+    label: ({ props }) => {
+      const classes = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
+
+      if (props.size === 'xs') return classes + ' text-xs'
+      else if (props.size === 'sm') return classes + ' text-sm'
+      else if (props.size === 'lg') return classes + ' text-lg'
+      else if (props.size === 'xl') return classes + ' text-xl'
+
+      return classes
+    },
+  },
+}
+
+export default theme

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

@@ -0,0 +1,13 @@
+import type { LabelTheme } from '../Label.vue'
+
+import BaseTheme from './Label.base.theme'
+
+const theme: LabelTheme = {
+  classes: {
+    wrapper: BaseTheme.classes?.wrapper,
+
+    label: 'text-xs text-gray-500 dark:text-gray-200 mb-2',
+  },
+}
+
+export default theme

package/src/components/link/Link.vue

@@ -13,22 +13,23 @@ const linkProps = {
 
 export type LinkProps = ExtractPublicPropTypes<typeof linkProps>
 
+type InternalClasses = 'wrapper'
+export interface LinkTheme extends ThemeComponent<LinkProps, InternalClasses> {}
+
 export default { name: 'XLink' }
 </script>
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes } from 'vue'
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/useColors'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 import { externalIcon } from '../../common/icons'
 
 import XIcon from '../icon/Icon.vue'
 
-import theme from './Link.theme'
-
 const props = defineProps(linkProps)
 
-const { styles, classes, className } = useTheme('link', theme, props)
+const { styles, classes, className } = useTheme('Link', {}, props)
 </script>
 
 <template>

package/src/components/link/index.ts

@@ -1,3 +1,2 @@
 export { default as XLink } from './Link.vue'
-export type { LinkProps } from './Link.vue'
-export type { LinkTheme } from './Link.theme'
+export type { LinkProps, LinkTheme } from './Link.vue'

package/src/components/link/{Link.theme.ts → theme/Link.base.theme.ts}

@@ -1,14 +1,6 @@
-import type { ThemeClasses, ThemeComponent } from '../../composables/theme'
-import type { LinkProps } from './Link.vue'
+import type { LinkTheme } from '../Link.vue'
 
-type InternalClasses = 'wrapper'
-
-interface InternalTheme extends ThemeComponent<LinkProps, InternalClasses> {}
-export interface LinkTheme extends Omit<InternalTheme, 'classes'> {
-  classes?: Partial<ThemeClasses<LinkProps, InternalClasses>>;
-}
-
-const theme: InternalTheme = {
+const theme: LinkTheme = {
   classes: {
     wrapper: 'transition duration-300 ease-in-out cursor-pointer inline-flex',
   },

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

@@ -0,0 +1,7 @@
+import type { LinkTheme } from '../Link.vue'
+
+import BaseTheme from './Link.base.theme'
+
+const theme: LinkTheme = BaseTheme
+
+export default theme

package/src/components/loader/Loader.vue

@@ -0,0 +1,59 @@
+<script lang="ts">
+const loaderProps = {
+  ...useCommon.props(),
+  status: {
+    type: String as PropType<LoaderStatus>,
+    default: 'active',
+  },
+  icon: String,
+  label: String,
+}
+
+export type LoaderStatus = 'active' | 'success' | 'error'
+export type LoaderProps = ExtractPublicPropTypes<typeof loaderProps>
+
+type InternalClasses = 'wrapper' | 'iconSuccess' | 'iconError' | 'label'
+export interface LoaderTheme extends ThemeComponent<LoaderProps, InternalClasses> {}
+
+export default {
+  name: 'XLoader',
+  validators: {
+    ...useCommon.validators(),
+    status: ['active', 'success', 'error'],
+  },
+}
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes, PropType } from 'vue'
+import { useCommon } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+import XIcon from '../../components/icon/Icon.vue'
+import XSpinner from '../../components/spinner/Spinner.vue'
+
+import { successIcon, errorIcon } from '../../common/icons'
+
+const props = defineProps(loaderProps)
+
+const { styles, classes, className } = useTheme('Loader', {}, props)
+</script>
+
+<template>
+  <div :class="[className, classes.wrapper]" :style="styles">
+    <x-spinner v-if="status === 'active'" :size="size" :icon="icon"/>
+    <x-icon
+      v-else-if="status === 'success'"
+      :class="classes.iconSuccess"
+      :size="size"
+      :icon="successIcon"
+    />
+    <x-icon
+      v-else-if="status === 'error'"
+      :class="classes.iconError"
+      :size="size"
+      :icon="errorIcon"
+    />
+    <span v-if="label" :class="classes.label">{{ label }}</span>
+  </div>
+</template>

package/src/components/loader/__tests__/Loader.spec.ts

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

package/src/components/loader/index.ts

@@ -0,0 +1,2 @@
+export { default as XLoader } from './Loader.vue'
+export type { LoaderProps, LoaderTheme } from './Loader.vue'

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

@@ -0,0 +1,12 @@
+import type { LoaderTheme } from '../Loader.vue'
+
+const theme: LoaderTheme = {
+  classes: {
+    wrapper: 'inline-flex items-center justify-center',
+    iconSuccess: 'text-green-500',
+    iconError: 'text-red-500',
+    label: 'mx-2 text-sm',
+  },
+}
+
+export default theme

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

@@ -0,0 +1,12 @@
+import type { LoaderTheme } from '../Loader.vue'
+
+const theme: LoaderTheme = {
+  classes: {
+    wrapper: 'inline-flex items-center justify-center',
+    iconSuccess: 'text-green-500',
+    iconError: 'text-red-500',
+    label: 'mx-1 text-sm',
+  },
+}
+
+export default theme

package/src/components/menu/Menu.vue

@@ -47,6 +47,9 @@ export type MenuArrayItem = {
 
 export type MenuProps = ExtractPublicPropTypes<typeof menuProps>
 
+type InternalClasses = 'wrapper'
+export interface MenuTheme extends ThemeComponent<MenuProps, InternalClasses> {}
+
 export default {
   name: 'XMenu',
   validators: {
@@ -57,21 +60,19 @@ export default {
 
 <script setup lang="ts">
 import type { ExtractPublicPropTypes, PropType } from 'vue'
-import { useCommon, type Size } from '../../composables/common'
-import { useColors } from '../../composables/colors'
-import { useTheme } from '../../composables/theme'
+import { useCommon, type Size } from '../../composables/useCommon'
+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 XDivider from '../../components/divider/Divider.vue'
 
-import theme from './Menu.theme'
-
 const props = defineProps(menuProps)
 
-const emit = defineEmits(['expand'])
+defineEmits(['expand'])
 
-const { styles, classes, className } = useTheme('menu', theme, props)
+const { styles, classes, className } = useTheme('Menu', {}, props)
 </script>
 
 <template>

package/src/components/menu/MenuItem.vue

@@ -35,6 +35,10 @@ const menuItemProps = {
 
 export type MenuItemProps = ExtractPublicPropTypes<typeof menuItemProps>
 
+type InternalClasses = 'wrapper'
+type InternalExtraData = { isActive: Ref<boolean>; }
+export interface MenuItemTheme extends ThemeComponent<MenuItemProps, InternalClasses, InternalExtraData> {}
+
 export default {
   name: 'XMenuItem',
   validators: {
@@ -44,16 +48,15 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, type ExtractPublicPropTypes, type PropType } from 'vue'
+import { ref, computed, watch, onMounted, type ExtractPublicPropTypes, type PropType, type Ref } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
-import { useColors } from '../../composables/colors'
-import { useCommon } from '../../composables/common'
-import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/useColors'
+import { useCommon } from '../../composables/useCommon'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
 
 import XIcon from '../../components/icon/Icon.vue'
 import XSpinner from '../../components/spinner/Spinner.vue'
 
-import theme from './MenuItem.theme'
 import type { MenuArrayItem } from './Menu.vue'
 
 const props = defineProps(menuItemProps)
@@ -116,7 +119,7 @@ watch(() => computedProps.value.active, (val) => {
   isActive.value = !!val
 })
 
-const { styles, classes, className } = useTheme('menu-item', theme, computedProps, { isActive })
+const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, { isActive })
 </script>
 
 <template>

package/src/components/menu/index.ts

@@ -1,7 +1,5 @@
 export { default as XMenu } from './Menu.vue'
-export type { MenuProps, MenuArrayItem } from './Menu.vue'
-export type { MenuTheme } from './Menu.theme'
+export type { MenuProps, MenuArrayItem, MenuTheme } from './Menu.vue'
 
 export { default as XMenuItem } from './MenuItem.vue'
-export type { MenuItemProps } from './MenuItem.vue'
-export type { MenuItemTheme } from './MenuItem.theme'
+export type { MenuItemProps, MenuItemTheme } from './MenuItem.vue'

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

@@ -0,0 +1,9 @@
+import type { MenuTheme } from '../Menu.vue'
+
+const theme: MenuTheme = {
+  classes: {
+    wrapper: '',
+  },
+}
+
+export default theme