@indielayer/ui 1.0.0-alpha.9 → 1.0.2

package/src/components/radio/Radio.vue

@@ -1,141 +1,69 @@
 <script lang="ts">
-import { defineComponent, computed, ref } from 'vue'
-import { useCSS } from '../../composables/css'
+export default { name: 'XRadio' }
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
 import { useCommon } from '../../composables/common'
+import { useTheme } from '../../composables/theme'
 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 './Radio.theme'
+
+const props = defineProps({
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  value: [String, Number, Boolean, Function, Object, Array],
+  label: String,
+  helper: String,
+  glow: Boolean,
+})
 
-export default defineComponent({
-  name: 'XRadio',
+const emit = defineEmits(useInputtable.emits(false))
 
-  components: {
-    XSpinner,
-  },
+const elRef = ref<HTMLElement | null>(null)
 
-  validators: {
-    ...useCommon.validators(),
+const selected = computed({
+  get() {
+    return props.value === props.modelValue
   },
-
-  props: {
-    ...useCommon.props(),
-    ...useColors.props('primary'),
-    ...useInteractive.props(),
-    ...useInputtable.props(),
-    value: [String, Number, Boolean, Function, Object, Array],
-    label: String,
-    glow: Boolean,
+  set() {
+    emit('update:modelValue', props.value)
   },
+})
 
-  emits: useInputtable.emits(false),
-
-  setup(props, { attrs, emit }) {
-    const elRef = ref<HTMLElement>()
-
-    const selected = computed({
-      get() {
-        return props.value === props.modelValue
-      },
-      set() {
-        emit('update:modelValue', props.value)
-      },
-    })
-
-    const css = useCSS()
-    const colors = useColors()
-    const gray = colors.getPalette('gray')
-
-    const styles = computed(() => {
-      const color = colors.getPalette(props.color)
-      const vars = []
-
-      if (props.loading) {
-        return css.variables({
-          bg: 'transparent',
-          border: 'transparent',
-          dark: {
-            bg: 'transparent',
-            border: 'transparent',
-          },
-        })
-      }
-
-      if (props.disabled) {
-        if (selected.value) {
-          vars.push(css.variables({
-            bg: 'transparent',
-            border: gray[200],
-            circle: gray[200],
-            dark: {
-              bg: 'transparent',
-              border: gray[700],
-              circle: gray[700],
-            },
-          }))
-        } else {
-          vars.push(css.variables({
-            bg: gray[200],
-            border: gray[200],
-            dark: {
-              bg: gray[700],
-              border: gray[700],
-            },
-          }))
-        }
-      } else {
-        if (selected.value) {
-          vars.push(css.variables({
-            bg: 'transparent',
-            border: color[500],
-            circle: color[500],
-            dark: {
-              bg: 'transparent',
-              border: color[500],
-              circle: 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[300],
-            },
-          }))
-        }
-
-        if (props.glow) {
-          vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
-        }
-      }
+const { focus, blur } = useInteractive(elRef)
 
-      return vars
-    })
+const {
+  errorInternal,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit, withListeners: false })
 
-    const interactive = useInteractive(elRef)
+const { styles, classes, className } = useTheme('radio', theme, props, { selected })
 
-    return {
-      ...interactive,
-      ...useInputtable(props, { focus: interactive.focus, emit, withListeners: false }),
-      selected,
-      styles,
-      elRef,
-    }
-  },
-})
+defineExpose({ focus, blur, reset, validate, setError })
 </script>
 
 <template>
   <label
     ref="elRef"
     tabindex="0"
-    class="inline-block mb-1 relative cursor-pointer focus:outline-none group"
     :aria-selected="selected ? 'true' : 'false'"
     :aria-disabled="(disabled || loading) ? 'true' : undefined"
     :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
     @keypress.prevent.stop.space="$emit('update:modelValue', value)"
   >
     <div
@@ -151,70 +79,65 @@ export default defineComponent({
         class="invisible absolute"
       />
       <div
-        class="rounded-full flex justify-center items-center flex-shrink-0 border-2 outline-offset-2 outline-slate-300 dark:outline-slate-500 group-focus:outline-1 group-focus:outline
-          border-[color:var(--x-border)]
-          bg-[color:var(--x-bg)]
-          dark:border-[color:var(--x-dark-border)]
-          dark:bg-[color:var(--x-dark-bg)]
-        "
         :class="[
+          $style['radio'],
+          classes.circle,
           [glow && !disabled && !loading ? $style['radio--glow'] : ''],
-          {
-            'h-4 w-4': size === 'sm' || size === 'xs',
-            'h-5 w-5': !size || !['xs', 'sm', 'xl'].includes(size),
-            'h-6 w-6': size === 'xl',
-          },
         ]"
       >
         <x-spinner v-if="loading" :size="size" class="absolute" />
         <svg
           v-else
-          class="fill-current text-[color:var(--x-circle)] dark:text-[color:var(--x-dark-circle)] w-full"
-          :class="{
-            'opacity-0': !selected,
-            'h-2': size === 'sm' || size === 'xs',
-            'h-[0.6rem]': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
-            'h-2.5': size === 'lg',
-            'h-3': size === 'xl',
-          }"
           viewBox="0 0 20 20"
+          class="fill-current w-full"
+          :class="[
+            classes.circleIcon,
+            $style['radio_circle']
+          ]"
         >
           <circle cx="10" cy="10" r="10"/>
         </svg>
       </div>
-      <span
-        v-if="label"
-        class="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',
-        }"
-        v-text="label"
-      ></span>
+      <div>
+        <div
+          v-if="label"
+          :class="classes.label"
+          v-text="label"
+        ></div>
+
+        <div
+          v-if="$slots.default"
+          :class="classes.content"
+        >
+          <slot></slot>
+        </div>
+      </div>
     </div>
 
-    <div
-      v-if="$slots.default"
-      :class="{
-        'text-xs pl-6': size === 'xs',
-        'text-sm pl-6': size === 'sm',
-        'pl-7': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
-        'text-lg pl-7': size === 'lg',
-        'text-lg pl-8': size === 'xl',
-      }"
-    >
-      <slot></slot>
-    </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>
   .radio {
+    border-color: var(--x-radio-border);
+    background-color: var(--x-radio-bg);
+
+    &_circle {
+      color: var(--x-radio-circle);
+    }
+
     &--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-radio-glow),0 4px 6px -4px var(--x-radio-glow);
+    }
+
+    :global(.dark) &, &:global(.dark) {
+      border-color: var(--x-radio-dark-border);
+      background-color: var(--x-radio-dark-bg);
+
+      &_circle {
+        color: var(--x-radio-dark-circle);
+      }
     }
   }
 </style>

package/src/components/radio/__tests__/Radio.spec.ts

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

package/src/components/scroll/Scroll.theme.ts

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

package/src/components/scroll/Scroll.vue

@@ -1,55 +1,53 @@
 <script lang="ts">
-import { defineComponent, ref, toRefs } from 'vue'
+export default { name: 'XScroll' }
+</script>
+
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
 import { useScroll, useResizeObserver, useEventListener } from '@vueuse/core'
+import { useTheme } from '../../composables/theme'
 
-export default defineComponent({
-  name: 'XScroll',
-
-  props: {
-    shadow: Boolean,
-    horizontal: Boolean,
-    mousewheel: Boolean,
-    scrollbar: {
-      type: Boolean,
-      default: true,
-    },
+import theme from './Scroll.theme'
+
+const props = defineProps({
+  shadow: Boolean,
+  horizontal: Boolean,
+  mousewheel: Boolean,
+  scrollbar: {
+    type: Boolean,
+    default: true,
   },
+})
 
-  setup(props) {
-    const scrollEl = ref<HTMLElement | null>(null)
+const scrollEl = ref<HTMLElement | null>(null)
 
-    const { x, y, isScrolling, arrivedState, directions } = useScroll(scrollEl)
-    const { left, right, top, bottom } = toRefs(arrivedState)
+const { x, y, isScrolling, arrivedState, directions } = useScroll(scrollEl)
+const { left, right, top, bottom } = toRefs(arrivedState)
 
-    useResizeObserver(scrollEl, triggerScroll)
+useResizeObserver(scrollEl, triggerScroll)
 
-    if (props.horizontal && props.mousewheel)
-      useEventListener(scrollEl, 'wheel', (e: WheelEvent) => {
-        if (!scrollEl.value || scrollEl.value.scrollWidth <= scrollEl.value.clientWidth) return
+if (props.horizontal && props.mousewheel)
+  useEventListener(scrollEl, 'wheel', (e: WheelEvent) => {
+    if (!scrollEl.value || scrollEl.value.scrollWidth <= scrollEl.value.clientWidth) return
 
-        e.preventDefault()
-        scrollEl.value.scrollLeft += e.deltaY + e.deltaX
-      })
+    e.preventDefault()
+    scrollEl.value.scrollLeft += e.deltaY + e.deltaX
+  })
 
-    function triggerScroll() {
-      scrollEl.value?.dispatchEvent(new CustomEvent('scroll'))
-    }
+function triggerScroll() {
+  scrollEl.value?.dispatchEvent(new CustomEvent('scroll'))
+}
 
-    return {
-      scrollEl,
-      left,
-      right,
-      top,
-      bottom,
-    }
-  },
-})
+const { styles, classes, className } = useTheme('scroll', theme, props)
 </script>
 
 <template>
   <div
     class="flex relative overflow-hidden"
+    :style="styles"
     :class="[
+      className,
+      classes.wrapper,
       $style.scrollWrap,
       horizontal ? [
         $style.horizontal,
@@ -81,7 +79,7 @@ export default defineComponent({
   </div>
 </template>
 
-<style lang="postcss" scoped module>
+<style lang="postcss" module>
 .scrollWrap {
   &:before, &:after {
     content: "";

package/src/components/scroll/__tests__/Scroll.spec.ts

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

package/src/components/select/Select.theme.ts

@@ -0,0 +1,54 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'inline-block align-bottom text-left focus:outline-none',
+
+    label: ({ props }: ThemeParams) => {
+      let c = 'font-medium text-gray-800 dark:text-gray-200 mb-1'
+
+      if (props.size === 'xs') c += ' text-xs'
+      else if (props.size === 'sm') c += ' text-sm'
+      else if (props.size === 'lg') c += ' text-lg'
+      else if (props.size === 'xl') c += ' text-xl'
+
+      return c
+    },
+
+    box: ({ props, data }: ThemeParams) => {
+      let c = 'w-full border border-gray-300 dark:border-gray-700 pr-8 outline-transparent outline outline-2 outline-offset-[-1px] transition-all duration-150 ease-in-out rounded-md shadow-sm'
+
+      if (!data.errorInternal && !props.disabled) c += ' hover:border-gray-400 dark:hover:border-gray-500'
+
+      if (props.size === 'xs') c += ' px-2 py-1 text-xs'
+      else if (props.size === 'sm') c += ' px-2 py-2 text-sm'
+      else if (props.size === 'lg') c += ' px-4 py-3 text-lg'
+      else if (props.size === 'xl') c += ' px-5 py-4 text-xl'
+      else c += ' px-3 py-2'
+
+      c += 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 c
+    },
+
+    content: 'py-1 max-h-72 overflow-scroll',
+
+    iconWrapper: 'pointer-events-none absolute inset-y-0 right-0 flex items-center px-2',
+
+    icon: ({ props }: ThemeParams) => {
+      if (props.size === 'sm' || props.size === 'xs') return 'h-3 w-3'
+      else if (props.size === 'lg') return 'h-6 w-6'
+      else if (props.size === 'xl') return 'h-7 w-7'
+
+      return 'h-5 w-5'
+    },
+  },
+
+  styles: ({ props, colors, css }: ThemeParams) => {
+    const color = colors.getPalette('primary')
+
+    return css.get('border', color[500])
+  },
+}