@indielayer/ui 1.2.0 → 1.4.0

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',
@@ -31,6 +29,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 +43,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)
 
@@ -88,6 +89,7 @@ const { focus, blur } = useInteractive(elRef)
 
 const {
   errorInternal,
+  hideFooterInternal,
   isInsideForm,
   inputListeners,
   reset,
@@ -95,37 +97,37 @@ 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
+        :id="id"
         ref="elRef"
         :class="[
           classes.input,
@@ -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="!hideFooterInternal" :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-50 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-[1.3rem] 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: '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/{collapse/__tests__/Collapse.spec.ts → label/__tests__/Label.spec.ts}

@@ -1,10 +1,10 @@
 import { describe, it, expect } from 'vitest'
 import { mount } from '@vue/test-utils'
-import Collapse from '../Collapse.vue'
+import Label from '../Label.vue'
 
-describe('Collapse', () => {
+describe('Label', () => {
   it('renders without errors', () => {
-    const wrapper = mount(Collapse)
+    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,18 @@
+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-8')
+      if (props.block) classes.push('w-full')
+
+      return classes
+    },
+
+    label: 'text-xs text-gray-500 dark:text-gray-200 mb-2',
+  },
+}
+
+export default theme

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',
@@ -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,28 @@
+import type { LinkTheme } from '../Link.vue'
+
+const theme: LinkTheme = {
+  classes: {
+    wrapper: 'transition duration-300 ease-in-out cursor-pointer inline-flex text-sm',
+  },
+
+  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/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-2 text-sm',
+  },
+}
+
+export default theme