@indielayer/ui 1.0.0-alpha.9 → 1.0.2

package/src/components/form/Form.vue

@@ -1,6 +1,21 @@
 <script lang="ts">
-import { defineComponent, provide, onMounted, watch, nextTick } from 'vue'
+export default {
+  name: 'XForm',
+  inheritAttrs: false,
+}
+</script>
+
+<script setup lang="ts">
+import { provide, onMounted, watch, nextTick, type PropType } from 'vue'
 import { injectFormKey } from '../../composables/keys'
+import { useTheme } from '../../composables/theme'
+
+import theme from './Form.theme'
+
+export type FormError = {
+  field: string
+  msg: string
+}
 
 export type Form = {
   name: string,
@@ -9,101 +24,103 @@ export type Form = {
   setError: (val: string)=> void,
 }
 
-export default defineComponent({
-  name: 'XForm',
-
-  inheritAttrs: false,
-
-  props: {
-    autoValidate: {
-      type: Boolean,
-      default: true,
-    },
-    autoFocus: {
-      type: Boolean,
-      default: true,
-    },
-    disabled: Boolean,
-    errors: {
-      type: Array,
-      default: () => [],
-    },
+const props = defineProps({
+  autoValidate: {
+    type: Boolean,
+    default: true,
   },
+  autoFocus: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: Boolean,
+  errors: {
+    type: [Array, Object] as PropType<[FormError[], FormError]>,
+    default: () => ([]),
+  },
+})
 
-  emits: ['submit'],
+const emit = defineEmits(['submit'])
 
-  setup(props, { emit }) {
-    const inputs: Form[] = []
+const inputs: Form[] = []
 
-    provide(injectFormKey, {
-      registerInput: (name: string, focus: ()=> void, validate: ()=> boolean, setError: (val: string)=> void) => {
-        const exists = inputs.find((i) => i.name === name)
+provide(injectFormKey, {
+  registerInput: (name: string, focus: ()=> void, validate: ()=> boolean, setError: (val: string)=> void) => {
+    const exists = inputs.find((i) => i.name === name)
 
-        if (exists) {
-          exists.focus = focus
-          exists.validate = validate
-          exists.setError = setError
-        }
-        else inputs.push({ name, focus, validate, setError })
-      },
-      unregisterInput: (name: string) => {
-        const index = inputs.findIndex((i) => i.name === name)
+    if (exists) {
+      exists.focus = focus
+      exists.validate = validate
+      exists.setError = setError
+    }
+    else inputs.push({ name, focus, validate, setError })
+  },
+  unregisterInput: (name: string) => {
+    const index = inputs.findIndex((i) => i.name === name)
 
-        inputs.splice(index, 1)
-      },
-      isInsideForm: true,
-    })
+    inputs.splice(index, 1)
+  },
+  isInsideForm: true,
+})
 
-    onMounted(() => {
-      if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus()
-    })
+onMounted(() => {
+  if (props.autoFocus && inputs && inputs.length > 0) inputs[0].focus()
+})
 
-    watch(() => props.errors, (errors) => {
-      nextTick(() => {
-        errors.forEach((error: any) => {
-          const input = inputs.find((i) => i.name === error.field)
+watch(() => props.errors, (errors) => {
+  if (errors) nextTick(() => {
+    if (Array.isArray(errors)) errors.forEach((error: any) => {
+      const input = inputs.find((i) => i.name === error.field)
 
-          if (input) input.setError(error.msg)
-        })
-      })
+      if (input) input.setError(error.msg)
     })
 
-    const validate = () => {
-      let isFormValid = true
+    else {
+      const input = inputs.find((i) => i.name === (errors as FormError).field)
+
+      if (input) input.setError((errors as FormError).msg)
+    }
+  })
+})
 
-      inputs.forEach((input) => {
-        const isInputValid = input.validate()
+const validate = () => {
+  let isFormValid = true
 
-        if (!isInputValid && isFormValid) {
-          isFormValid = false
+  inputs.forEach((input) => {
+    const isInputValid = input.validate()
 
-          // focus on input error
-          if (input.focus) input.focus()
-        }
-      })
+    if (!isInputValid && isFormValid) {
+      isFormValid = false
 
-      return isFormValid
+      // focus on input error
+      if (input.focus) input.focus()
     }
+  })
 
-    const submit = (e: Event) => {
-      e.preventDefault()
-      e.stopPropagation()
+  return isFormValid
+}
 
-      const isFormValid = props.autoValidate ? validate() : true
+const submit = (e: Event) => {
+  e.preventDefault()
+  e.stopPropagation()
 
-      emit('submit', isFormValid)
-    }
+  const isFormValid = props.autoValidate ? validate() : true
 
-    return {
-      validate,
-      submit,
-    }
-  },
-})
+  emit('submit', isFormValid)
+}
+
+const { styles, classes, className } = useTheme('form', theme, props)
 </script>
 
 <template>
-  <form @submit="submit">
+  <form
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
+    @submit="submit"
+  >
     <fieldset :disabled="disabled">
       <slot></slot>
     </fieldset>

package/src/components/form/__tests__/Form.spec.ts

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

package/src/components/helpers/InputError.tsx

@@ -0,0 +1,14 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'InputError',
+  props: {
+    error: String,
+    helper: String,
+  },
+  setup(props) {
+    return () => props.error
+        ? <p class="text-sm text-red-500 dark:text-red-400 mt-1">{props.error}</p>
+        : props.helper ? <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">{props.helper}</p> : ''
+  },
+})

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

@@ -0,0 +1,16 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: ({ props }: ThemeParams) => {
+      const classes = 'inline'
+
+      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'
+
+      return classes + ' h-5 w-5'
+    },
+  },
+}

package/src/components/icon/Icon.vue

@@ -1,118 +1,102 @@
 <script lang="ts">
-import { computed, defineComponent, inject, ref, watchEffect } from 'vue'
+export default { name: 'XIcon' }
+</script>
+
+<script setup lang="ts">
+import { inject, ref, watchEffect, normalizeStyle, unref, computed } from 'vue'
 import { useCommon } from '../../composables/common'
 import { injectIconsKey } from '../../composables/keys'
+import { useTheme } from '../../composables/theme'
 
-export default defineComponent({
-  name: 'XIcon',
+import theme from './Icon.theme'
 
-  validators: {
-    ...useCommon.validators(),
+const props = defineProps({
+  ...useCommon.props(),
+  icon: {
+    type: String,
+    required: true,
   },
-
-  props: {
-    ...useCommon.props(),
-    icon: {
-      type: String,
-      required: true,
-    },
-    filled: Boolean,
-    viewBox: {
-      type: String,
-      default: '0 0 24 24',
-    },
+  filled: Boolean,
+  viewBox: {
+    type: String,
+    default: '0 0 24 24',
   },
+})
 
-  setup(props) {
-    const icons: any = inject(injectIconsKey, () => {}, false)
-    const sizeClasses = computed(() => {
-      if (props.size === 'xs') return 'h-3 w-3'
-      else if (props.size === 'sm') return 'h-4 w-4'
-      else if (props.size === 'lg') return 'h-6 w-6'
-      else if (props.size === 'xl') return 'h-9 w-9'
-
-      return 'h-5 w-5'
-    })
-
-    const isWrapSVG = ref(false)
-    const computedIcon = ref('')
-    const computedFilled = ref(props.filled)
-    const computedViewBox = ref(props.viewBox)
-    const attrs = ref({})
-
-    watchEffect(() => {
-      const injectedIcon = icons && icons[props.icon]
-
-      isWrapSVG.value = false
-      computedIcon.value = injectedIcon
-
-      if (injectedIcon) {
-        if (typeof injectedIcon === 'string') {
-          if (injectedIcon.startsWith('<svg')) {
-            isWrapSVG.value = true
-
-            const { content, attributes } = getSVG(injectedIcon)
-
-            attrs.value = attributes
-            computedIcon.value = content
-          } else {
-            isWrapSVG.value = false
-            computedIcon.value = injectedIcon
-          }
-        } else if (typeof injectedIcon === 'object') {
-          computedIcon.value = injectedIcon.icon
-          computedFilled.value = injectedIcon.filled || props.filled
-          computedViewBox.value = injectedIcon.viewBox || injectedIcon.viewbox || props.viewBox
-        }
-      } else {
-        computedIcon.value = props.icon
-      }
-    })
+const icons: any = inject(injectIconsKey, () => ({}))
 
-    function getSVG(svgString: string) {
-      svgString = svgString.trim()
-      const content = svgString.substring(svgString.indexOf('>') + 1, svgString.lastIndexOf('</svg>'))
-      const attrsRaw = svgString.substring(svgString.indexOf('<svg') + 4, svgString.indexOf('>')).trim().match(/[\w-]+="[^"]*"/g)
+const isWrapSVG = ref(false)
+const computedIcon = ref('')
+const computedFilled = ref(props.filled)
+const computedViewBox = ref(props.viewBox)
+const attrs = ref({})
 
-      const attributes: Record<string, string | null> = {}
+watchEffect(() => {
+  const injectedIcon = icons && icons[props.icon]
 
-      attrsRaw?.forEach((a) => {
-        const [attribute, value] = a.split('=')
+  isWrapSVG.value = false
+  computedIcon.value = injectedIcon
 
-        if (!['height', 'width', 'class'].includes(attribute)) attributes[attribute] = value.replace(/(^"|"$)/g, '')
-      })
+  if (injectedIcon) {
+    if (typeof injectedIcon === 'string') {
+      if (injectedIcon.startsWith('<svg')) {
+        isWrapSVG.value = true
 
-      return {
-        attributes,
-        content,
-      }
-    }
+        const { content, attributes } = getSVG(injectedIcon)
 
-    return {
-      attrs,
-      isWrapSVG,
-      computedIcon,
-      computedFilled,
-      computedViewBox,
-      sizeClasses,
+        attrs.value = attributes
+        computedIcon.value = content
+      } else {
+        isWrapSVG.value = false
+        computedIcon.value = injectedIcon
+      }
+    } else if (typeof injectedIcon === 'object') {
+      computedIcon.value = injectedIcon.icon
+      computedFilled.value = injectedIcon.filled || props.filled
+      computedViewBox.value = injectedIcon.viewBox || injectedIcon.viewbox || props.viewBox
     }
-  },
+  } else {
+    computedIcon.value = props.icon
+  }
 })
+
+function getSVG(svgString: string) {
+  svgString = svgString.trim()
+  const content = svgString.substring(svgString.indexOf('>') + 1, svgString.lastIndexOf('</svg>'))
+  const attrsRaw = svgString.substring(svgString.indexOf('<svg') + 4, svgString.indexOf('>')).trim().match(/[\w-]+="[^"]*"/g)
+
+  const attributes: Record<string, string | null> = {}
+
+  attrsRaw?.forEach((a) => {
+    const [attribute, value] = a.split('=')
+
+    if (!['height', 'width', 'class'].includes(attribute)) attributes[attribute] = value.replace(/(^"|"$)/g, '')
+  })
+
+  return {
+    attributes,
+    content,
+  }
+}
+
+const { styles, classes, className } = useTheme('icon', theme, props)
+
+const normalizedStyle = computed(() => normalizeStyle(unref(styles)))
 </script>
 
 <template>
   <svg
     v-if="isWrapSVG"
-    class="inline"
-    :class="sizeClasses"
+    :style="normalizedStyle"
+    :class="['shrink-0', className, classes.wrapper]"
     v-bind="attrs"
     v-html="computedIcon"
   />
   <svg
     v-else
+    :style="normalizedStyle"
     xmlns="http://www.w3.org/2000/svg"
-    class="inline"
-    :class="[sizeClasses, { 'stroke-2': !computedFilled}]"
+    :class="['shrink-0', className, classes.wrapper, { 'stroke-2': !computedFilled}]"
     :stroke-linejoin="computedFilled ? undefined : 'round'"
     :stroke-linecap="computedFilled ? undefined : 'round'"
     :stroke="computedFilled ? undefined : 'currentColor'"

package/src/components/icon/__tests__/Icon.spec.ts

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

package/src/components/image/Image.theme.ts

@@ -0,0 +1,7 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: '',
+  },
+}

package/src/components/image/Image.vue

@@ -1,36 +1,35 @@
 <script lang="ts">
-import { defineComponent, watch, ref } from 'vue'
+export default { name: 'XImage' }
+</script>
 
-const fallback = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
+<script setup lang="ts">
+import { watch, ref } from 'vue'
+import { useTheme } from '../../composables/theme'
 
-export default defineComponent({
-  name: 'XImage',
+import theme from './Image.theme'
 
-  props: {
-    src: String,
-  },
+const fallback = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
 
-  setup(props) {
-    const source = ref<string | undefined>(fallback)
+const props = defineProps({
+  src: String,
+})
 
-    watch(() => props.src, (src) => {
-      if (!src) return
-      const img = new Image()
+const source = ref<string | undefined>(fallback)
 
-      img.onload = () => { source.value = props.src }
-      img.onerror = () => { }
-      img.src = src
-    }, {
-      immediate: true,
-    })
+watch(() => props.src, (src) => {
+  if (!src) return
+  const img = new Image()
 
-    return {
-      source,
-    }
-  },
+  img.onload = () => { source.value = props.src }
+  img.onerror = () => { }
+  img.src = src
+}, {
+  immediate: true,
 })
+
+const { styles, classes, className } = useTheme('image', theme, props)
 </script>
 
 <template>
-  <img :src="source" />
+  <img :class="[className, classes.wrapper]" :style="styles" :src="source" />
 </template>

package/src/components/image/__tests__/Image.spec.ts

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

package/src/components/index.ts

@@ -29,12 +29,12 @@ export { default as XScroll } from './scroll/Scroll.vue'
 export { default as XSelect } from './select/Select.vue'
 export { default as XSkeleton } from './skeleton/Skeleton.vue'
 export { default as XSlider } from './slider/Slider.vue'
-export { default as XSpacer } from './spacer/Spacer.vue'
+export { default as XSpacer } from './spacer/Spacer'
 export { default as XSpinner } from './spinner/Spinner.vue'
 export { default as XTable } from './table/Table.vue'
-export { default as XTableBody } from './table/TableBody.vue'
+export { default as XTableBody } from './table/TableBody'
 export { default as XTableCell } from './table/TableCell.vue'
-export { default as XTableHead } from './table/TableHead.vue'
+export { default as XTableHead } from './table/TableHead'
 export { default as XTableHeader } from './table/TableHeader.vue'
 export { default as XTableRow } from './table/TableRow.vue'
 export { default as XTab } from './tab/Tab.vue'

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

@@ -0,0 +1,44 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'inline-block align-bottom text-left',
+
+    label: ({ props }: ThemeParams) => {
+      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 // + ' text-sm'
+    },
+
+    input: ({ props, data }: ThemeParams) => {
+      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']
+
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+
+      if (props.size === 'xs') classes.push('px-2 py-1 text-xs')
+      else if (props.size === 'sm') classes.push('px-2 py-2 text-sm')
+      else if (props.size === 'lg') classes.push('px-4 py-3 text-lg')
+      else if (props.size === 'xl') classes.push('px-5 py-4 text-xl')
+      else classes.push('px-3 py-2')
+
+      classes.push(props.disabled
+        ? 'bg-gray-100 dark:bg-gray-900 text-gray-500 cursor-not-allowed'
+        : 'bg-white 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 }: ThemeParams) => {
+    const color = colors.getPalette(props.color)
+
+    return css.get('border', color[400])
+  },
+}