@indielayer/ui 1.0.0-alpha.7 → 1.0.0

package/src/components/card/__tests__/Card.spec.ts

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

package/src/components/checkbox/Checkbox.theme.ts

@@ -0,0 +1,92 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'inline-block relative cursor-pointer align-middle',
+
+    box: ({ props }: ThemeParams) => {
+      const classes = ['rounded flex justify-center items-center shrink-0 border-2 border-[color:var(--x-checkbox-border)] bg-[color:var(--x-checkbox-bg)] dark:border-[color:var(--x-checkbox-dark-border)] dark:bg-[color:var(--x-checkbox-dark-bg)]']
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-4 w-4')
+      else if (props.size === 'xl') classes.push('h-6 w-6')
+      else classes.push('h-5 w-5')
+
+      return classes
+    },
+
+    icon: ({ props }: ThemeParams) => {
+      const classes = ['fill-current text-white dark:text-gray-900']
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('h-2 w-2')
+      else if (props.size === 'xl') classes.push('h-4 w-4')
+      else classes.push('h-3 w-3')
+
+      return classes
+    },
+
+    label: ({ props }: ThemeParams) => {
+      const classes = ['inline-block font-medium text-gray-800 dark:text-gray-200 pl-2']
+
+      if (props.size === 'xs') classes.push('text-xs')
+      else if (props.size === 'sm') classes.push('text-sm')
+      else if (props.size === 'lg') classes.push('text-lg')
+      else if (props.size === 'xl') classes.push('text-xl')
+
+      return classes
+    },
+  },
+
+  styles({ props, colors, css, data }: ThemeParams) {
+    const gray = colors.getPalette('gray')
+    const color = colors.getPalette(props.color)
+    const vars: (object | string)[] = []
+
+    if (props.loading) {
+      return css.variables({
+        bg: 'transparent',
+        border: 'transparent',
+        dark: {
+          bg: 'transparent',
+          border: 'transparent',
+        },
+      })
+    }
+
+    if (props.disabled) {
+      vars.push(css.variables({
+        bg: gray[100],
+        border: gray[200],
+        dark: {
+          bg: gray[800],
+          border: gray[700],
+        },
+      }))
+    } else {
+      if (data.checked) {
+        vars.push(css.variables({
+          bg: color[500],
+          border: color[500],
+          dark: {
+            bg: color[500],
+            border: color[500],
+          },
+        }))
+      } else {
+        vars.push(css.variables({
+          bg: '#fff',
+          border: props.glow ? color[300] : gray[300],
+          dark: {
+            bg: gray[900],
+            border: props.glow ? color[300] : gray[400],
+          },
+        }))
+      }
+
+      if (props.glow) {
+        vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+      }
+    }
+
+    return vars
+  },
+}

package/src/components/checkbox/Checkbox.vue

@@ -1,142 +1,71 @@
 <script lang="ts">
-import { defineComponent, ref, watch, computed, type StyleValue } from 'vue'
-import { useCSS } from '../../composables/css'
+export default { name: 'XCheckbox' }
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useTheme } from '../../composables/theme'
 import { useCommon } from '../../composables/common'
 import { useColors } from '../../composables/colors'
 import { useInteractive } from '../../composables/interactive'
 import { useInputtable } from '../../composables/inputtable'
 
 import XSpinner from '../../components/spinner/Spinner.vue'
+import XInputError from '../helpers/InputError'
+
+import theme from './Checkbox.theme'
+
+const props = defineProps({
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  label: String,
+  helper: String,
+  glow: Boolean,
+})
 
-export default defineComponent({
-  name: 'XCheckbox',
-
-  components: {
-    XSpinner,
-  },
-
-  validators: {
-    ...useCommon.validators(),
-  },
-
-  props: {
-    ...useCommon.props(),
-    ...useColors.props('primary'),
-    ...useInteractive.props(),
-    ...useInputtable.props(),
-    label: String,
-    glow: Boolean,
-  },
-
-  emits: useInputtable.emits(false),
-
-  expose: ['toggle'],
-
-  setup(props, { attrs, emit }) {
-    const elRef = ref<HTMLElement>()
-    const checked = ref(false)
-
-    watch(() => props.modelValue, (value) => {
-      checked.value = !!value
-    }, { immediate: true })
-
-    watch(() => checked.value, (value) => {
-      emit('update:modelValue', value)
-    })
-
-    const sizeClasses = computed(() => {
-      if (props.size === 'xs' || props.size === 'sm') return 'h-4 w-4'
-      else if (props.size === 'xl') return 'h-6 w-6'
-
-      return 'h-5 w-5'
-    })
-
-    const iconSizeClasses = computed(() => {
-      if (props.size === 'xs' || props.size === 'sm') return 'h-2 w-2'
-      else if (props.size === 'xl') return 'h-4 w-4'
-
-      return 'h-3 w-3'
-    })
-
-    const css = useCSS()
-    const colors = useColors()
-    const gray = colors.getPalette('gray')
-
-    const cssVariables = computed(() => {
-      const color = colors.getPalette(props.color)
-      const vars: (object | string)[] = []
-
-      if (props.loading) {
-        return css.variables({
-          bg: 'transparent',
-          border: 'transparent',
-          dark: {
-            bg: 'transparent',
-            border: 'transparent',
-          },
-        })
-      }
-
-      if (props.disabled) {
-        vars.push(css.variables({
-          bg: gray[100],
-          border: gray[200],
-          dark: {
-            bg: gray[800],
-            border: gray[700],
-          },
-        }))
-      } else {
-        if (checked.value) {
-          vars.push(css.variables({
-            bg: color[500],
-            border: color[500],
-            dark: {
-              bg: color[500],
-              border: color[500],
-            },
-          }))
-        } else {
-          vars.push(css.variables({
-            bg: '#fff',
-            border: props.glow ? color[300] : gray[300],
-            dark: {
-              bg: gray[900],
-              border: props.glow ? color[300] : gray[400],
-            },
-          }))
-        }
-
-        if (props.glow) {
-          vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
-        }
-      }
-
-      return vars as StyleValue
-    })
-
-    function toggle() {
-      checked.value = !checked.value
-    }
+const emit = defineEmits(useInputtable.emits(false))
 
-    const interactive = useInteractive(elRef)
-
-    return {
-      ...interactive,
-      ...useInputtable(props, { focus: interactive.focus, emit, withListeners: false }),
-      elRef,
-      checked,
-      sizeClasses,
-      iconSizeClasses,
-      cssVariables,
-      toggle,
-    }
-  },
+const elRef = ref<HTMLElement | null>(null)
+const checked = ref(false)
+
+watch(() => props.modelValue, (value) => {
+  checked.value = !!value
+}, { immediate: true })
+
+watch(() => checked.value, (value) => {
+  emit('update:modelValue', value)
 })
+
+function toggle() {
+  checked.value = !checked.value
+}
+
+const { focus, blur } = useInteractive(elRef)
+
+const {
+  errorInternal,
+  isInsideForm,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit, withListeners: false })
+
+const { styles, classes, className } = useTheme('checkbox', theme, props, { checked })
+
+defineExpose({ focus, blur, toggle, reset, validate, setError })
 </script>
 
 <template>
-  <label class="inline-block relative cursor-pointer align-middle mb-1 pb-2">
+  <label
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+      { 'mb-3': isInsideForm }
+    ]"
+  >
     <div
       ref="elRef"
       class="flex items-center"
@@ -155,51 +84,35 @@ export default defineComponent({
         :required="required"
       />
       <div
-        class="rounded flex justify-center items-center flex-shrink-0 border-2
-          border-[color:var(--x-border)]
-          bg-[color:var(--x-bg)]
-          dark:border-[color:var(--x-dark-border)]
-          dark:bg-[color:var(--x-dark-bg)]
-        "
-        :style="cssVariables"
         :class="[
+          classes.box,
           [(glow && !disabled && !loading) ? $style['checkbox--glow'] : ''],
-          sizeClasses,
         ]"
       >
         <x-spinner v-if="loading" :size="size" class="absolute" />
-        <svg
-          v-else
-          class="fill-current text-gray-100 dark:text-gray-900"
-          :class="[iconSizeClasses, {
-            'opacity-0': !checked,
-          }]"
-          viewBox="0 0 20 20"
-        >
-          <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
-        </svg>
+        <slot v-else name="icon">
+          <svg
+            viewBox="0 0 20 20"
+            :class="[classes.icon, { 'opacity-0': !checked }]"
+          >
+            <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
+          </svg>
+        </slot>
       </div>
-      <div
-        class="inline-block font-medium text-gray-800 dark:text-gray-200 pl-2"
-        :class="{
-          'text-xs': size === 'xs',
-          'text-sm': size === 'sm',
-          'text-lg': size === 'lg',
-          'text-xl': size === 'xl',
-        }"
-      >
+      <div :class="classes.label">
         <span v-if="label" v-text="label"></span>
         <slot v-else></slot>
       </div>
     </div>
-    <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
+
+    <x-input-error :error="errorInternal" :helper="helper"/>
   </label>
 </template>
 
-<style lang="postcss" module scoped>
+<style lang="postcss" module>
   .checkbox {
     &--glow {
-      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow);
+      box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-checkbox-glow),0 4px 6px -4px var(--x-checkbox-glow);
     }
   }
 </style>

package/src/components/checkbox/__tests__/Checkbox.spec.ts

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

package/src/components/collapse/Collapse.theme.ts

@@ -0,0 +1,11 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: ({ props }: ThemeParams) => `relative flex items-center ${props.icon ?  'flex-row-reverse' : ''} ${props.disabled ? '' : 'cursor-pointer'}`,
+
+    icon: 'absolute top-1/2 transform -translate-y-1/2 right-3',
+
+    content: 'transition-[height] duration-150 overflow-y-hidden',
+  },
+}

package/src/components/collapse/Collapse.vue

@@ -1,142 +1,123 @@
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue'
+export default { name: 'XCollapse' }
+</script>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useTheme } from '../../composables/theme'
+import { useColors } from '../../composables/colors'
 
 import XIcon from '../../components/icon/Icon.vue'
 
-export default defineComponent({
-  name: 'XCollapse',
+import theme from './Collapse.theme'
 
-  components: {
-    XIcon,
+const props = defineProps({
+  ...useColors.props(),
+  tag: {
+    type: String,
+    default: 'div',
   },
+  disabled: Boolean,
+  expanded: Boolean,
+  showIcon: Boolean,
+  icon: String,
+})
 
-  props: {
-    tag: {
-      type: String,
-      default: 'div',
-    },
-    disabled: Boolean,
-    expanded: Boolean,
-    showIcon: {
-      type: Boolean,
-      default: true,
-    },
-    icon: String,
-    color: String,
-  },
+const emit = defineEmits(['expand'])
 
-  emits: ['expand'],
-
-  expose: ['toggle', 'open', 'close'],
-
-  setup(props, { emit }) {
-    const collapsed = ref(!props.expanded)
-    const animated = ref(true)
-
-    watch(() => props.expanded, () => {
-      collapsed.value = !props.expanded
-    })
-
-    function onBeforeEnter(el: HTMLElement) {
-      if (animated.value) el.style.height = '0px'
-    }
-
-    function onEnter(el: HTMLElement, done: ()=> void) {
-      if (!animated.value) done()
-      else {
-        el.addEventListener('transitionend', done)
-        setTimeout(() => {
-          el.style.height = `${el.scrollHeight}px`
-        }, 1)
-      }
-    }
-
-    function onAfterEnter(el: HTMLElement) {
-      if (!animated.value) {
-        animated.value = true
-      } else {
-        el.style.removeProperty('height')
-      }
-    }
-
-    function onBeforeLeave(el: HTMLElement) {
-      if (!animated.value) return
-      el.style.height = `${el.scrollHeight}px`
-    }
-
-    function onLeave(el: HTMLElement ,done: ()=> void) {
-      if (!animated.value) done()
-      else {
-        el.addEventListener('transitionend', done)
-        setTimeout(() => {
-          el.style.height = '0px'
-        }, 1)
-      }
-    }
-
-    function onAfterLeave(el: HTMLElement) {
-      if (!animated.value) {
-        animated.value = true
-      } else {
-        el.style.removeProperty('height')
-      }
-    }
-
-    function open(anim = true) {
-      animated.value = anim
-      collapsed.value = false
-    }
-
-    function close(anim = true) {
-      animated.value = anim
-      collapsed.value = true
-    }
-
-    function toggle() {
-      if (!props.disabled) collapsed.value = !collapsed.value
-    }
-
-    function onExpand(anim = true) {
-      open(anim)
-      emit('expand')
-    }
-
-    return {
-      collapsed,
-      onBeforeEnter,
-      onEnter,
-      onAfterEnter,
-      onBeforeLeave,
-      onLeave,
-      onAfterLeave,
-      onExpand,
-      toggle,
-      close,
-      open,
-    }
-  },
+const collapsed = ref(!props.expanded)
+const animated = ref(true)
+
+watch(() => props.expanded, () => {
+  collapsed.value = !props.expanded
 })
+
+function onBeforeEnter(el: HTMLElement) {
+  if (animated.value) el.style.height = '0px'
+}
+
+function onEnter(el: HTMLElement, done: ()=> void) {
+  if (!animated.value) done()
+  else {
+    el.addEventListener('transitionend', done)
+    setTimeout(() => {
+      el.style.height = `${el.scrollHeight}px`
+    }, 1)
+  }
+}
+
+function onAfterEnter(el: HTMLElement) {
+  if (!animated.value) {
+    animated.value = true
+  } else {
+    el.style.removeProperty('height')
+  }
+}
+
+function onBeforeLeave(el: HTMLElement) {
+  if (!animated.value) return
+  el.style.height = `${el.scrollHeight}px`
+}
+
+function onLeave(el: HTMLElement ,done: ()=> void) {
+  if (!animated.value) done()
+  else {
+    el.addEventListener('transitionend', done)
+    setTimeout(() => {
+      el.style.height = '0px'
+    }, 1)
+  }
+}
+
+function onAfterLeave(el: HTMLElement) {
+  if (!animated.value) {
+    animated.value = true
+  } else {
+    el.style.removeProperty('height')
+  }
+}
+
+function open(anim = true) {
+  animated.value = anim
+  collapsed.value = false
+}
+
+function close(anim = true) {
+  animated.value = anim
+  collapsed.value = true
+}
+
+function toggle() {
+  if (!props.disabled) collapsed.value = !collapsed.value
+}
+
+function onExpand(anim = true) {
+  open(anim)
+  emit('expand')
+}
+
+const { styles, classes, className } = useTheme('collapse', theme, props)
+
+defineExpose({ toggle, open, close })
 </script>
 
 <template>
   <component
     :is="tag"
+    :style="styles"
+    :class="className"
     :aria-disabled="disabled"
     :aria-expanded="collapsed ? 'false' : 'true'"
   >
     <div
-      class="flex items-center relative"
-      :class="{
-        'cursor-pointer' : !disabled,
-        'flex-row-reverse': icon,
-      }"
+      :class="classes.wrapper"
       @click="toggle"
     >
       <div class="flex-1 overflow-hidden">
         <slot :collapsed="collapsed"></slot>
       </div>
 
-      <div v-if="showIcon" class="absolute top-1/2 transform -translate-y-1/2 right-3">
+      <div v-if="showIcon" :class="classes.icon">
         <span
           class="flex transform transition-transform duration-150"
           :class="[
@@ -165,7 +146,7 @@ export default defineComponent({
       <slot name="summary"></slot>
     </template>
 
-    <Transition
+    <transition
       @before-enter="onBeforeEnter"
       @enter="onEnter"
       @after-enter="onAfterEnter"
@@ -173,9 +154,9 @@ export default defineComponent({
       @leave="onLeave"
       @after-leave="onAfterLeave"
     >
-      <div v-show="!collapsed" class="transition-[height] duration-150 overflow-y-hidden">
+      <div v-show="!collapsed" :class="classes.content">
         <slot name="content" :expand="onExpand" :collapsed="collapsed"></slot>
       </div>
-    </Transition>
+    </transition>
   </component>
 </template>

package/src/components/collapse/__tests__/Collapse.spec.ts

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

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

@@ -0,0 +1,7 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'max-w-screen-2xl mx-auto px-4 md:px-8',
+  },
+}