@indielayer/ui 1.0.0-alpha.9 → 1.0.0

package/src/components/input/Input.vue

@@ -1,152 +1,132 @@
 <script lang="ts">
-import { defineComponent, ref, computed } from 'vue'
-import { useCSS } from '../../composables/css'
+export default { name: 'XInput' }
+</script>
+
+<script setup lang="ts">
+import { computed, reactive, ref } 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 { eyeIcon, eyeVisibleIcon } from '../../common/icons'
 
-export default defineComponent({
-  name: 'XInput',
+import XIcon from '../icon/Icon.vue'
+import XInputError from '../helpers/InputError'
 
-  validators: {
-    ...useCommon.validators(),
-  },
+import theme from './Input.theme'
 
-  props: {
-    ...useCommon.props(),
-    ...useInteractive.props(),
-    ...useInputtable.props(),
-    showPasswordToggle: {
-      type: Boolean,
-      default: true,
-    },
-    helper: String,
-    label: String,
-    dir: {
-      type: String,
-      default: 'ltr',
-    },
-    icon: String,
-    iconRight: String,
-    max: Number,
-    maxlength: Number,
-    min: Number,
-    minlength: Number,
-    placeholder: String,
-    type: {
-      type: String,
-      default: 'text',
-    },
-    inputClass: String,
-    block: Boolean,
+const props = defineProps({
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  showPasswordToggle: {
+    type: Boolean,
+    default: true,
   },
+  helper: String,
+  label: String,
+  dir: {
+    type: String,
+    default: 'ltr',
+  },
+  icon: String,
+  iconLeft: String,
+  iconRight: String,
+  max: [Number, String],
+  maxlength: [Number, String],
+  min: [Number, String],
+  minlength: [Number, String],
+  placeholder: String,
+  type: {
+    type: String,
+    default: 'text',
+  },
+  block: Boolean,
+})
 
-  emits: useInputtable.emits(),
-
-  setup(props, { emit }) {
-    const elRef = ref<HTMLInputElement>()
-    const currentType = ref(props.type)
-
-    const labelClasses = computed(() => {
-      if (props.size === 'xs') return 'text-xs'
-      else if (props.size === 'sm') return 'text-sm'
-      else if (props.size === 'lg') return 'text-lg'
-      else if (props.size === 'xl') return 'text-xl'
+const emit = defineEmits(useInputtable.emits())
 
-      return ''
-    })
+const elRef = ref<HTMLInputElement | null>(null)
+const currentType = ref(props.type)
 
-    const sizeClasses = computed(() => {
-      if (props.size === 'xs') return 'px-2 py-1 text-xs'
-      else if (props.size === 'sm') return 'px-2 py-2 text-sm'
-      else if (props.size === 'lg') return 'px-4 py-3 text-lg'
-      else if (props.size === 'xl') return 'px-5 py-4 text-xl'
+function onChange(e: Event) {
+  if (!e.target) return
 
-      return 'px-3 py-2'
-    })
+  const target = (e.target as HTMLInputElement)
 
-    const css = useCSS('input')
-    const colors = useColors()
-    const color = colors.getPalette('primary')
-    const style = css.get('border', color[500])
+  if (props.type === 'number') {
+    const value = Number(target.value)
 
-    function onChange(e: Event) {
-      if (!e.target) return
+    if (typeof props.min !== 'undefined') {
+      if (value < props.min) target.value = props.min.toString()
+    }
 
-      const target = (e.target as HTMLInputElement)
+    if (typeof props.max !== 'undefined') {
+      if (value > props.max) target.value = props.max.toString()
+    }
+  }
+}
 
-      if (props.type === 'number') {
-        const value = Number(target.value)
+function togglePasswordVisibility() {
+  currentType.value = currentType.value === 'password' ? 'text' : 'password'
+}
 
-        if (typeof props.min !== 'undefined') {
-          if (value < props.min) target.value = props.min.toString()
-        }
+const { focus, blur } = useInteractive(elRef)
 
-        if (typeof props.max !== 'undefined') {
-          if (value > props.max) target.value = props.max.toString()
-        }
-      }
-    }
+const {
+  errorInternal,
+  isInsideForm,
+  inputListeners,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit })
 
-    function togglePasswordVisibility() {
-      currentType.value = currentType.value === 'password' ? 'text' : 'password'
-    }
+const { styles, classes, className } = useTheme('input', theme, props, { errorInternal })
 
-    const interactive = useInteractive(elRef)
-
-    return {
-      ...interactive,
-      ...useInputtable(props, { focus: interactive.focus, emit }),
-      currentType,
-      labelClasses,
-      sizeClasses,
-      style,
-      elRef,
-      onChange,
-      togglePasswordVisibility,
-    }
-  },
-})
+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="labelClasses"
+      :class="classes.label"
       v-text="label"
     ></p>
 
     <div class="relative">
       <x-icon
-        v-if="icon"
+        v-if="iconLeft"
         :size="size"
-        :icon="icon"
-        class="text-gray-600 dark:text-gray-300 absolute ml-2 left-0 my-auto inset-y-0"
+        :icon="iconLeft"
+        class="ml-2 left-1"
+        :class="classes.icon"
       />
 
       <input
         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 hover:border-gray-400 dark:border-gray-700 border shadow-sm rounded-md
-        focus:border-[color:var(--x-input-border)]
-        "
-        :style="style"
         :class="[
-          sizeClasses,
-          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',
-          type === 'password' ? 'pr-9' : '',
+          classes.input,
+          type === 'password' ? 'pr-10' : '',
+          // error
+          errorInternal
+            ? 'border-red-500 dark:border-red-400 focus:outline-red-500'
+            : 'focus:outline-[color:var(--x-input-border)]',
           {
-            '!pl-9': icon,
-            '!pr-9': iconRight,
-            // error
-            'border-red-500 focus:border-red-500 dark:focus:border-red-500': errorInternal,
+            '!pl-10': iconLeft,
+            '!pr-10': iconRight,
           },
-          inputClass,
         ]"
         :disabled="disabled"
         :min="min"
@@ -168,33 +148,20 @@ export default defineComponent({
         v-if="iconRight"
         :size="size"
         :icon="iconRight"
-        class="text-gray-600 dark:text-gray-300 absolute mr-2 right-0 my-auto inset-y-0"
+        class="mr-2 right-1"
+        :class="classes.icon"
       />
 
-      <svg
+      <x-icon
         v-else-if="type === 'password' && showPasswordToggle"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-        stroke-linejoin="round"
-        stroke-linecap="round"
-        fill="none"
-        class="text-gray-600 dark:text-gray-300 stroke-2 w-5 h-5 absolute my-auto mr-2 inset-y-0 right-1 cursor-pointer"
+        :size="size"
+        :icon="currentType === 'password' ? eyeIcon : eyeVisibleIcon"
+        class="mr-2 right-1 cursor-pointer"
+        :class="classes.icon"
         @click="togglePasswordVisibility()"
-      >
-        <template v-if="currentType === 'password'">
-          <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-          <path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-        </template>
-
-        <template v-else>
-          <path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
-        </template>
-      </svg>
+      />
     </div>
 
-    <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/input/__tests__/Input.spec.ts

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

package/src/components/link/Link.theme.ts

@@ -0,0 +1,26 @@
+import type { ThemeParams } from '../../composables/theme'
+
+export default {
+  classes: {
+    wrapper: 'transition duration-300 ease-in-out cursor-pointer inline-flex',
+  },
+
+  styles: ({ colors, props, css }: ThemeParams) => {
+    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],
+      },
+    })
+  },
+}

package/src/components/link/Link.vue

@@ -1,66 +1,42 @@
 <script lang="ts">
-import { defineComponent, computed } from 'vue'
-import { useColors } from '../../composables/colors'
-import { useCSS } from '../../composables/css'
-
-export default defineComponent({
-  name: 'XLink',
+export default { name: 'XLink' }
+</script>
 
-  props: {
-    ...useColors.props(),
-    tag: {
-      type: String,
-      default: 'a',
-    },
-    to: [String, Object],
-    shadow: Boolean,
-    external: Boolean,
-    underline: Boolean,
-  },
+<script setup lang="ts">
+import { useColors } from '../../composables/colors'
+import { useTheme } from '../../composables/theme'
+import { externalIcon } from '../../common/icons'
 
-  setup(props) {
-    const css = useCSS()
-    const colors = useColors()
-    const styles = computed(() => {
-      const color = colors.getPalette(props.color || 'gray')
+import XIcon from '../icon/Icon.vue'
 
-      return css.variables({
-        text: props.color ? color[500] : '',
-        hover: {
-          text: !props.shadow ? color[600] : '',
-        },
-        shadow: color[100],
-        dark: {
-          text: props.color ? color[400] : '',
-          hover: {
-            text: color[300],
-          },
-          shadow: color[900],
-        },
-      })
-    })
+import theme from './Link.theme'
 
-    return {
-      styles,
-    }
+const props = defineProps({
+  ...useColors.props(),
+  tag: {
+    type: String,
+    default: 'a',
   },
+  to: [String, Object],
+  shadow: Boolean,
+  external: Boolean,
+  underline: Boolean,
 })
+
+const { styles, classes, className } = useTheme('link', theme, props)
 </script>
 
 <template>
   <component
     :is="to ? 'router-link' : tag"
     :to="to"
-    class="transition duration-300 ease-in-out cursor-pointer inline-flex
-      text-[color:var(--x-text)]
-      dark:text-[color:var(--x-dark-text)]
-    "
     :style="styles"
     :class="[
+      className,
+      $style['link'],
+      classes.wrapper,
       [shadow ? $style['link--shadow'] : ''],
-      {
-        'underline': underline
-      },
+      { 'underline': underline },
     ]"
   >
     <span
@@ -68,20 +44,7 @@ export default defineComponent({
       class="inline-flex items-center"
     >
       <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"
-      >
-        <line x1="7" y1="17" x2="17" y2="7" />
-        <polyline points="7 7 17 7 17 17" />
-      </svg>
+      <x-icon :icon="externalIcon" />
     </span>
     <template v-else>
       <slot></slot>
@@ -91,18 +54,30 @@ export default defineComponent({
 
 <style lang="postcss" module scoped>
   .link {
+    color: var(--x-link-text);
+
+    &:hover {
+      color: var(--x-link-text-hover, var(--x-link-text));
+    }
+
     &--shadow {
-      box-shadow: inset 0 -0.315em 0 0 var(--x-shadow);
+      box-shadow: inset 0 -0.315em 0 0 var(--x-link-shadow);
       &:hover {
-        box-shadow: inset 0 -1.125em 0 0 var(--x-shadow);
+        box-shadow: inset 0 -1.325em 0 0 var(--x-link-shadow);
       }
     }
 
-    :global(.dark) & {
+    :global(.dark) &, &:global(.dark) {
+      color: var(--x-link-dark-text);
+
+      &:hover {
+        color: var(--x-link-dark-text-hover, var(--x-link-dark-text));
+      }
+
       &--shadow {
-        box-shadow: inset 0 -0.315em 0 0 var(--x-dark-shadow);
+        box-shadow: inset 0 -0.315em 0 0 var(--x-link-dark-shadow);
         &:hover {
-          box-shadow: inset 0 -1.125em 0 0 var(--x-dark-shadow);
+          box-shadow: inset 0 -1.325em 0 0 var(--x-link-dark-shadow);
         }
       }
     }

package/src/components/link/__tests__/Link.spec.ts

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

package/src/components/menu/Menu.theme.ts

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

package/src/components/menu/Menu.vue

@@ -1,48 +1,55 @@
 <script lang="ts">
-import { defineComponent, type PropType } from 'vue'
+export default { name: 'XMenu' }
+</script>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
 import { useCommon } from '../../composables/common'
 import { useColors } from '../../composables/colors'
+import { useTheme } from '../../composables/theme'
 
 import XMenuItem from './MenuItem.vue'
 import XCollapse from '../../components/collapse/Collapse.vue'
 import XDivider from '../../components/divider/Divider.vue'
 
-export default defineComponent({
-  name: 'XMenu',
+import theme from './Menu.theme'
 
-  components: {
-    XDivider,
-    XCollapse,
-    XMenuItem,
+const props = defineProps({
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  items: Array as PropType<Array<any>>,
+  collapsible: {
+    type: Boolean,
+    default: true,
   },
-
-  props: {
-    ...useCommon.props(),
-    ...useColors.props('primary'),
-    items: Array as PropType<Array<any>>,
-    collapsible: {
-      type: Boolean,
-      default: true,
-    },
-    collapseIcon: String,
-    expanded: Boolean,
-    disabled: Boolean,
-    rounded: {
-      type: Boolean,
-      default: true,
-    },
-    filled: {
-      type: Boolean,
-      default: true,
-    },
+  collapseIcon: String,
+  expanded: Boolean,
+  disabled: Boolean,
+  rounded: {
+    type: Boolean,
+    default: true,
+  },
+  filled: {
+    type: Boolean,
+    default: true,
   },
-
-  emits: ['expand'],
 })
+
+const emit = defineEmits(['expand'])
+
+const { styles, classes, className } = useTheme('menu', theme, props)
 </script>
 
 <template>
-  <div v-if="items">
+  <div
+    v-if="items"
+    :style="styles"
+    :class="[
+      'space-y-1',
+      className,
+      classes.wrapper
+    ]"
+  >
     <template v-for="(item, index) in items" :key="index">
       <template v-if="item.items">
         <x-collapse
@@ -50,7 +57,7 @@ export default defineComponent({
           :icon="item.collapseIcon || collapseIcon"
           :expanded="item.expanded || expanded"
           :disabled="disabled || item.disabled"
-          class="x-menu-inner"
+          class="x-menu-inner space-y-1"
           @expand="$emit('expand')"
         >
           <template #default="{ }">
@@ -66,7 +73,7 @@ export default defineComponent({
           </template>
           <template #content="{ expand }">
             <x-menu
-              class="border-l ml-4 border-gray-100 dark:border-gray-700 mt-2 mb-1"
+              class="border-l ml-4 border-gray-100 dark:border-gray-700"
               :class="{ 'pl-1': filled }"
               :items="item.items"
               :color="item.color || color"
@@ -92,7 +99,7 @@ export default defineComponent({
             inactive
           />
           <x-menu
-            class="x-menu-inner ml-4 border-l border-gray-100 dark:border-gray-700"
+            class="x-menu-inner space-y-1 ml-4 border-l border-gray-100 dark:border-gray-700"
             :class="{ 'pl-1': filled }"
             :items="item.items"
             :color="item.color || color"
@@ -107,18 +114,20 @@ export default defineComponent({
           />
         </template>
       </template>
-      <component
-        :is="item.divider ? 'x-divider' : 'x-menu-item'"
-        v-else
-        :color="item.color || color"
-        :size="item.size || size"
-        :item="item"
-        :disabled="disabled || item.disabled"
-        :filled="filled"
-        :rounded="rounded"
-        :class="{ 'my-2': item.divider }"
-        @active="$emit('expand')"
-      />
+      <template v-else>
+        <x-divider v-if="item.divider"/>
+        <x-menu-item
+          v-else
+          :color="item.color || color"
+          :size="item.size || size"
+          :item="item"
+          :disabled="disabled || item.disabled"
+          :filled="filled"
+          :rounded="rounded"
+          :class="{ 'my-2': item.divider }"
+          @active="$emit('expand')"
+        />
+      </template>
     </template>
   </div>
 </template>