@indielayer/ui 1.0.0-alpha.7 → 1.0.0

package/src/components/tag/Tag.vue

@@ -1,98 +1,70 @@
 <script lang="ts">
-import { computed, defineComponent } from 'vue'
-import { useCSS } from '../../composables/css'
+export default { name: 'XTag' }
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
 import { useColors } from '../../composables/colors'
 import { useCommon } from '../../composables/common'
+import { useTheme } from '../../composables/theme'
+import { closeIcon } from '../../common/icons'
 
-export default defineComponent({
-  name: 'XTag',
-
-  props: {
-    ...useCommon.props(),
-    ...useColors.props('gray'),
-    tag: {
-      type: String,
-      default: 'span',
-    },
-    rounded: Boolean,
-    removable: Boolean,
-    outlined: Boolean,
-  },
-
-  emits: ['remove'],
+import XIcon from '../icon/Icon.vue'
 
-  setup(props) {
-    const css = useCSS()
-    const colors = useColors()
-    const styles = computed(() => {
-      const color = colors.getPalette(props.color)
+import theme from './Tag.theme'
 
-      return css.variables({
-        bg: color[100],
-        text: color[800],
-        border: color[800],
-        dark: {
-          text: props.outlined ? color[200] : color[800],
-        },
-      })
-    })
+const props = defineProps({
+  ...useCommon.props(),
+  ...useColors.props('gray'),
+  tag: {
+    type: String,
+    default: 'span',
+  },
+  rounded: Boolean,
+  removable: Boolean,
+  outlined: Boolean,
+})
 
-    const sizeClasses = computed(() => {
-      if (props.size === 'xs') return 'px-2 py-1 text-xs'
-      else if (props.size === 'sm') return 'px-2 py-1 text-sm'
-      else if (props.size === 'lg') return 'px-4 py-3 text-lg'
-      else if (props.size === 'xl') return 'px-6 py-6 text-xl'
+defineEmits(['remove'])
 
-      return 'px-3 py-2'
-    })
+const closeIconSize = computed(() => {
+  if (props.size === 'xs') return 'xs'
+  else if (props.size === 'sm') return 'sm'
+  else if (props.size === 'lg') return 'md'
+  else if (props.size === 'xl') return 'lg'
 
-    return {
-      styles,
-      sizeClasses,
-    }
-  },
+  return 'sm'
 })
+
+const { styles, classes, className } = useTheme('tag', theme, props)
 </script>
 
 <template>
   <component
     :is="tag"
-    class="inline-flex items-center leading-none whitespace-nowrap
-      text-[color:var(--x-text)]
-      dark:text-[color:var(--x-dark-text)]
-      border-[color:var(--x-border)
-      "
+    class="text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border-[color:var(--x-tag-border)"
     :style="styles"
     :class="
       [
-        sizeClasses,
-        outlined ? 'border' : 'bg-[color:var(--x-bg)]',
+        className,
+        classes.wrapper,
+        outlined ? 'border' : 'bg-[color:var(--x-tag-bg)]',
         rounded ? 'rounded-full' : 'rounded'
       ]"
   >
     <span
       v-if="removable"
-      class="flex items-center"
+      class="max-w-full truncate"
     >
       <slot></slot>
-      <svg
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-        fill="none"
-        role="presentation"
-        class="stroke-2 w-4 h-4 ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150 ease-in-out flex-shrink-0"
+      <x-icon
+        :size="closeIconSize"
+        :icon="closeIcon"
+        class="ml-1 cursor-pointer hover:text-gray-700 transition-colors duration-150"
         @click="(e) => $emit('remove', e)"
-      >
-        <path d="M6 18L18 6M6 6l12 12" />
-      </svg>
+      />
     </span>
 
-    <template v-else>
-      <slot></slot>
-    </template>
+    <slot v-else></slot>
   </component>
 </template>

package/src/components/tag/__tests__/Tag.spec.ts

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

package/src/components/textarea/Textarea.theme.ts

@@ -0,0 +1,62 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'inline-block align-bottom text-left',
+    // wrapper: ({ props, data }: ThemeParams) => {
+    //   let c = 'inline-flex items-center leading-none whitespace-nowrap'
+
+    //   if (props.size === 'xs') c += ' px-2 py-1 text-xs'
+    //   else if (props.size === 'sm') c += ' px-2 py-1 text-sm'
+    //   else if (props.size === 'lg') c += ' px-4 py-3 text-lg'
+    //   else if (props.size === 'xl') c += ' px-6 py-6 text-xl'
+    //   else c += ' px-3 py-2'
+
+    //   return c
+    // },
+
+    // loadingWrapper: 'absolute inset-0 flex items-center justify-center z-40 bg-gray-300 dark:bg-gray-600 rounded opacity-50',
+
+    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 = ['resize-none appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 outline-transparent outline outline-2 outline-offset-[-1px] transition 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
+    },
+  },
+
+  styles: ({ colors, props, css }: ThemeParams) => {
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[100],
+      text: color[800],
+      border: color[800],
+      dark: {
+        text: props.outlined ? color[200] : color[800],
+      },
+    })
+  },
+}

package/src/components/textarea/Textarea.vue

@@ -1,141 +1,127 @@
 <script lang="ts">
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue'
+export default { name: 'XTextarea' }
+</script>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
 import { useCSS } from '../../composables/css'
+import { useTheme } from '../../composables/theme'
 import { useCommon } from '../../composables/common'
 import { useColors } from '../../composables/colors'
 import { useInputtable } from '../../composables/inputtable'
 import { useInteractive } from '../../composables/interactive'
 
-export default defineComponent({
-  name: 'XTextarea',
+import XInputError from '../helpers/InputError'
 
-  validators: {
-    ...useCommon.validators(),
-  },
+import theme from './Textarea.theme'
 
-  props: {
-    ...useCommon.props(),
-    ...useInteractive.props(),
-    ...useInputtable.props(),
-    helper: String,
-    label: String,
-    dir: {
-      type: String,
-      default: 'ltr',
-    },
-    rows: Number,
-    max: Number,
-    maxlength: Number,
-    min: Number,
-    minlength: Number,
-    placeholder: String,
-    adjustToText: {
-      type: Boolean,
-      default: true,
-    },
-    preventEnter: Boolean,
-    inputClass: String,
-    block: Boolean,
+const props = defineProps({
+  ...useCommon.props(),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  helper: String,
+  label: String,
+  dir: {
+    type: String,
+    default: 'ltr',
   },
-
-  emits: useInputtable.emits(),
-
-  setup(props, { emit }) {
-    const elRef = ref<HTMLTextAreaElement>()
-    let observer: ResizeObserver | null = null
-
-    onMounted(() => {
-      if (elRef.value) {
-        observer = new ResizeObserver(resize)
-        observer.observe(elRef.value)
-        window.addEventListener('resize', resize)
-      }
-    })
-
-    onBeforeUnmount(() => {
-      if (observer) observer.disconnect()
-      window.removeEventListener('resize', resize)
-    })
-
-    watch([() => props.modelValue, () => props.size], () => {
-      setTimeout(resize)
-    })
-
-    const css = useCSS('textarea')
-    const colors = useColors()
-    const color = colors.getPalette('primary')
-    const style = css.get('border', color[500])
-
-    function onInput() {
-      resize()
-    }
-
-    function onEnter(e: KeyboardEvent) {
-      if (props.preventEnter) e.preventDefault()
-      e.stopPropagation()
-
-      return
-    }
-
-    function resize() {
-      if (props.adjustToText && elRef.value) {
-        elRef.value.style.height = '1px'
-        elRef.value.style.height = (2 + elRef.value.scrollHeight) + 'px'
-      }
-    }
-
-    const interactive = useInteractive(elRef)
-
-    return {
-      ...interactive,
-      ...useInputtable(props, { focus: interactive.focus, emit }),
-      elRef,
-      style,
-      onInput,
-      onEnter,
-    }
+  rows: [Number, String],
+  max: [Number, String],
+  maxlength: [Number, String],
+  min: [Number, String],
+  minlength: [Number, String],
+  placeholder: String,
+  adjustToText: {
+    type: Boolean,
+    default: true,
   },
+  preventEnter: Boolean,
+  block: Boolean,
+})
+
+const emit = defineEmits(useInputtable.emits())
+
+const elRef = ref<HTMLTextAreaElement | null>(null)
+
+useResizeObserver(elRef, resize)
+
+onMounted(() => {
+  window.addEventListener('resize', resize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', resize)
 })
+
+watch([() => props.modelValue, () => props.size], () => {
+  setTimeout(resize)
+})
+
+const css = useCSS('textarea')
+const colors = useColors()
+const color = colors.getPalette('primary')
+const style = css.get('border', color[400])
+
+function onInput() {
+  resize()
+}
+
+function onEnter(e: KeyboardEvent) {
+  if (props.preventEnter) e.preventDefault()
+  e.stopPropagation()
+
+  return
+}
+
+function resize() {
+  if (props.adjustToText && elRef.value) {
+    elRef.value.style.height = '1px'
+    elRef.value.style.height = (2 + elRef.value.scrollHeight) + 'px'
+  }
+}
+
+const { focus, blur } = useInteractive(elRef)
+
+const {
+  errorInternal,
+  isInsideForm,
+  inputListeners,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit })
+
+const { styles, classes, className } = useTheme('textarea', theme, props, { errorInternal })
+
+defineExpose({ focus, blur, reset, validate, setError })
 </script>
 
 <template>
   <label
-    class="inline-block relative align-bottom text-left"
-    :class="{ 'mb-3': isInsideForm, 'w-full': block }"
+    :style="styles"
+    class="relative"
+    :class="[
+      className,
+      classes.wrapper,
+      { 'mb-3': isInsideForm, 'w-full': block }
+    ]"
   >
     <p
       v-if="label"
-      class="font-medium text-gray-800 dark:text-gray-200 mb-1"
-      :class="{
-        'text-xs': size === 'xs',
-        'text-sm': size === 'sm',
-        'text-lg': size === 'lg',
-        'text-xl': size === 'xl',
-      }"
+      :class="classes.label"
       v-text="label"
     ></p>
 
     <textarea
       ref="elRef"
-      class="appearance-none block w-full placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none transition-colors duration-150 ease-in-out border-gray-300 dark:border-gray-700 resize-none overflow-hidden border shadow-sm rounded-md
-      focus:border-[color:var(--x-textarea-border)]
-      "
+      class=""
       :style="style"
       :class="[
-        disabled ? 'bg-gray-100 dark:bg-gray-700 text-gray-500 cursor-not-allowed' : 'bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200',
-        {
-          // size
-          'px-2 py-1 text-xs': size === 'xs',
-          'px-2 py-2 text-sm': size === 'sm',
-          'px-3 py-2': !size || !['auto', 'xs', 'sm', 'lg', 'xl'].includes(size),
-          'px-4 py-3 text-lg': size === 'lg',
-          'px-5 py-4 text-xl': size === 'xl',
-        },
-        {
-          // error
-          'border-red-500 focus:border-red-500 dark:focus:border-red-500': errorInternal,
-        },
-        inputClass,
+        classes.input,
+        errorInternal
+          ? 'border-red-500 dark:border-red-400 focus:outline-red-500'
+          : 'focus:outline-[color:var(--x-textarea-border)]',
       ]"
       :disabled="disabled"
       :max="max"
@@ -147,13 +133,12 @@ export default defineComponent({
       :name="name"
       :placeholder="placeholder"
       :readonly="readonly"
-      :value="modelValue?.toString()"
+      :value="modelValue ? String(modelValue) : ''"
       v-on="inputListeners"
       @keydown.enter="onEnter"
       @input="onInput"
     ></textarea>
 
-    <p v-if="errorInternal" class="text-sm text-red-500 mt-1" v-text="errorInternal"></p>
-    <p v-else-if="helper" class="text-sm text-gray-500 mt-1" v-text="helper"></p>
+    <x-input-error :error="errorInternal" :helper="helper"/>
   </label>
 </template>

package/src/components/textarea/__tests__/Textarea.spec.ts

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

package/src/components/toggle/Toggle.theme.ts

@@ -0,0 +1,51 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: '',
+
+    label: ({ props }: ThemeParams) => {
+      const c = 'font-medium text-gray-800 dark:text-gray-200'
+
+      if (props.size === 'xs') return c + ' text-xs'
+      else if (props.size === 'sm') return c + ' text-sm'
+      else if (props.size === 'lg') return c + ' text-lg'
+      else if (props.size === 'xl') return c + ' text-xl'
+
+      return c + ' text-sm'
+    },
+
+    buttonWrapper: ({ props }: ThemeParams) => {
+      let c = 'relative shrink-0'
+
+      if (props.size === 'sm' || props.size === 'xs') c += ' w-6'
+      else if (props.size === 'lg') c += ' w-10'
+      else if (props.size === 'xl') c += ' w-12'
+      else c += ' w-8'
+
+      return c
+    },
+
+    button: ({ props }: ThemeParams) => {
+      let c = 'rounded-full shadow transform transition duration-150 shrink-0'
+
+      if (props.size === 'sm' || props.size === 'xs') c += ' h-3 w-3'
+      else if (props.size === 'lg') c += ' h-5 w-5'
+      else if (props.size === 'xl') c += ' h-6 w-6'
+      else c += ' h-4 w-4'
+
+      return c
+    },
+  },
+
+  styles: ({ colors, props, css }: ThemeParams) => {
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[500],
+      dark: {
+        bg: color[600],
+      },
+    })
+  },
+}