@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/icon/Icon.vue

@@ -0,0 +1,119 @@
+<script lang="ts">
+const iconProps = {
+  ...useCommon.props(),
+  icon: {
+    type: String,
+    required: true,
+  },
+  filled: Boolean,
+  viewBox: {
+    type: String,
+    default: '0 0 24 24',
+  },
+}
+
+export type IconProps = ExtractPublicPropTypes<typeof iconProps>
+export type Icon = string | { icon: string; filled?: boolean; viewBox?: string; }
+export type IconInjection = Record<string, Icon>
+
+type InternalClasses = 'wrapper'
+export interface IconTheme extends ThemeComponent<IconProps, InternalClasses> {}
+
+export default {
+  name: 'XIcon',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { inject, ref, watchEffect, normalizeStyle, unref, computed, type ExtractPublicPropTypes } from 'vue'
+import { useCommon } from '../../composables/useCommon'
+import { injectIconsKey } from '../../composables/keys'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(iconProps)
+
+const icons = inject(injectIconsKey, {})
+
+const isWrapSVG = ref(false)
+const computedIcon = ref<Icon | undefined>('')
+const computedFilled = ref(props.filled)
+const computedViewBox = ref(props.viewBox)
+const attrs = ref({})
+
+watchEffect(() => {
+  const injectedIcon = icons && props.icon && 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 || 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', {}, props)
+
+const normalizedStyle = computed(() => normalizeStyle(unref(styles)))
+</script>
+
+<template>
+  <svg
+    v-if="isWrapSVG"
+    :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="['shrink-0', className, classes.wrapper, { 'stroke-2': !computedFilled}]"
+    :stroke-linejoin="computedFilled ? undefined : 'round'"
+    :stroke-linecap="computedFilled ? undefined : 'round'"
+    :stroke="computedFilled ? undefined : 'currentColor'"
+    :fill="computedFilled ? 'currentColor' : 'none'"
+    :viewBox="computedViewBox"
+    v-html="computedIcon"
+  />
+</template>

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

@@ -0,0 +1,15 @@
+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, {
+      props: {
+        icon: 'star',
+      },
+    })
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/icon/index.ts

@@ -0,0 +1,2 @@
+export { default as XIcon } from './Icon.vue'
+export type { IconProps, IconTheme, Icon, IconInjection } from './Icon.vue'

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

@@ -0,0 +1,18 @@
+import type { IconTheme } from '../Icon.vue'
+
+const theme: IconTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = 'inline shrink-0'
+
+      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'
+    },
+  },
+}
+
+export default theme

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

@@ -0,0 +1,9 @@
+import type { IconTheme } from '../Icon.vue'
+
+const theme: IconTheme = {
+  classes: {
+    wrapper: 'inline shrink-0 h-4 w-4',
+  },
+}
+
+export default theme

package/src/components/image/Image.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+const imageProps = {
+  src: String,
+}
+
+export type ImageProps = ExtractPublicPropTypes<typeof imageProps>
+
+type InternalClasses = 'wrapper'
+export interface ImageTheme extends ThemeComponent<ImageProps, InternalClasses> {}
+
+export default { name: 'XImage' }
+</script>
+
+<script setup lang="ts">
+import { watch, ref, type ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const fallback = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
+
+const props = defineProps(imageProps)
+
+const source = ref<string | undefined>(fallback)
+
+if (typeof window !== 'undefined' && Image) {
+  watch(() => props.src, (src) => {
+    if (!src) return
+    const img = new Image()
+
+    img.onload = () => { source.value = props.src }
+    img.onerror = () => { }
+    img.src = src
+  }, {
+    immediate: true,
+  })
+}
+
+const { styles, classes, className } = useTheme('Image', {}, props)
+</script>
+
+<template>
+  <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/image/index.ts

@@ -0,0 +1,2 @@
+export { default as XImage } from './Image.vue'
+export type { ImageProps, ImageTheme } from './Image.vue'

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

@@ -0,0 +1,9 @@
+import type { ImageTheme } from '../Image.vue'
+
+const theme: ImageTheme = {
+  classes: {
+    wrapper: '',
+  },
+}
+
+export default theme

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

@@ -0,0 +1,7 @@
+import type { ImageTheme } from '../Image.vue'
+
+import BaseTheme from './Image.base.theme'
+
+const theme: ImageTheme = BaseTheme
+
+export default theme

package/src/components/index.ts

@@ -0,0 +1,42 @@
+export * from './accordion'
+export * from './alert'
+export * from './avatar'
+export * from './badge'
+export * from './breadcrumbs'
+export * from './button'
+export * from './card'
+export * from './carousel'
+export * from './checkbox'
+export * from './container'
+export * from './divider'
+export * from './drawer'
+export * from './form'
+export * from './formGroup'
+export * from './icon'
+export * from './image'
+export * from './input'
+export * from './inputFooter'
+export * from './label'
+export * from './link'
+export * from './loader'
+export * from './menu'
+export * from './modal'
+export * from './notifications'
+export * from './pagination'
+export * from './popover'
+export * from './progress'
+export * from './radio'
+export * from './scroll'
+export * from './select'
+export * from './skeleton'
+export * from './slider'
+export * from './spacer'
+export * from './spinner'
+export * from './stepper'
+export * from './tab'
+export * from './table'
+export * from './tag'
+export * from './textarea'
+export * from './themeProvider'
+export * from './toggle'
+export * from './tooltip'

package/src/components/input/Input.vue

@@ -0,0 +1,181 @@
+<script lang="ts">
+const inputProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  showPasswordToggle: {
+    type: Boolean,
+    default: true,
+  },
+  dir: {
+    type: String as PropType<'ltr' | 'rtl'>,
+    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,
+}
+
+export type InputProps = ExtractPublicPropTypes<typeof inputProps>
+
+type InternalClasses = 'wrapper' | 'input' | 'icon'
+type InternalExtraData = { errorInternal: any; }
+export interface InputTheme extends ThemeComponent<InputProps, InternalClasses, InternalExtraData> {}
+
+export default {
+  name: 'XInput',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { ref, type PropType, type ExtractPublicPropTypes, watch } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useColors } from '../../composables/useColors'
+import { useCommon } from '../../composables/useCommon'
+import { useInputtable } from '../../composables/useInputtable'
+import { useInteractive } from '../../composables/useInteractive'
+import { eyeIcon, eyeVisibleIcon } from '../../common/icons'
+
+import XLabel from '../label/Label.vue'
+import XIcon from '../icon/Icon.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
+
+const props = defineProps(inputProps)
+
+const emit = defineEmits(useInputtable.emits())
+
+const elRef = ref<HTMLInputElement | null>(null)
+const currentType = ref(props.type)
+
+watch(() => props.type, (newValue) => { currentType.value = newValue })
+
+function onChange(e: Event) {
+  if (!e.target) return
+
+  const target = (e.target as HTMLInputElement)
+
+  if (props.type === 'number') {
+    const value = Number(target.value)
+
+    if (typeof props.min !== 'undefined') {
+      if (value < Number(props.min)) target.value = props.min.toString()
+    }
+
+    if (typeof props.max !== 'undefined') {
+      if (value > Number(props.max)) target.value = props.max.toString()
+    }
+  }
+}
+
+function togglePasswordVisibility() {
+  currentType.value = currentType.value === 'password' ? 'text' : 'password'
+}
+
+const { focus, blur } = useInteractive(elRef)
+
+const {
+  errorInternal,
+  hideFooterInternal,
+  isInsideForm,
+  inputListeners,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit })
+
+const { styles, classes, className } = useTheme('Input', {}, props, { errorInternal })
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <x-label
+    :style="styles"
+    :block="block"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <div class="relative">
+      <slot name="prefix">
+        <x-icon
+          v-if="iconLeft"
+          :size="size"
+          :icon="iconLeft"
+          class="ml-2 left-1"
+          :class="classes.icon"
+        />
+      </slot>
+
+      <input
+        :id="id"
+        ref="elRef"
+        :class="[
+          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-10': iconLeft,
+            '!pr-10': iconRight,
+          },
+        ]"
+        :disabled="disabled"
+        :min="min"
+        :max="max"
+        :minlength="minlength"
+        :maxlength="maxlength"
+        :dir="dir"
+        :name="name"
+        :placeholder="placeholder"
+        :readonly="readonly"
+        :type="currentType"
+        :value="modelValue || ''"
+        v-bind="$attrs"
+        v-on="inputListeners"
+        @change="onChange"
+      />
+
+      <slot name="suffix">
+        <x-icon
+          v-if="iconRight"
+          :size="size"
+          :icon="iconRight"
+          class="mr-2 right-1"
+          :class="classes.icon"
+        />
+        <x-icon
+          v-else-if="type === 'password' && showPasswordToggle"
+          :size="size"
+          :icon="currentType === 'password' ? eyeIcon : eyeVisibleIcon"
+          class="mr-2 right-1 cursor-pointer"
+          :class="classes.icon"
+          @click="togglePasswordVisibility()"
+        />
+      </slot>
+    </div>
+
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
+  </x-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/input/index.ts

@@ -0,0 +1,2 @@
+export { default as XInput } from './Input.vue'
+export type { InputProps, InputTheme } from './Input.vue'

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

@@ -0,0 +1,35 @@
+import type { InputTheme } from '../Input.vue'
+
+const theme: InputTheme = {
+  classes: {
+    wrapper: '',
+
+    input: ({ props, data }) => {
+      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 }) => {
+    const color = colors.getPalette(props.color)
+
+    return css.get('border', color[400])
+  },
+}
+
+export default theme

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

@@ -0,0 +1,37 @@
+import type { InputTheme } from '../Input.vue'
+
+const theme: InputTheme = {
+  classes: {
+    wrapper: '',
+
+    input: ({ props, data }) => {
+      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-b text-sm px-4']
+
+      if (!data.errorInternal && !props.disabled) classes.push('hover:border-gray-400 dark:hover:border-gray-500')
+
+      if (props.size === 'xs' || props.size === 'sm') classes.push('py-1.5')
+      else if (props.size === 'lg' || props.size === 'xl') classes.push('py-3.5')
+      else classes.push('py-2.5')
+
+      if (props.disabled) {
+        classes.push('bg-gray-100 dark:bg-gray-900 text-gray-300 cursor-not-allowed')
+      } else if (props.readonly) {
+        classes.push('bg-white dark:bg-gray-900 text-gray-700')
+      } else {
+        classes.push('bg-gray-50 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 }) => {
+    const color = colors.getPalette(props.color)
+
+    return css.get('border', color[400])
+  },
+}
+
+export default theme

package/src/components/inputFooter/InputFooter.vue

@@ -0,0 +1,29 @@
+<script lang="ts">
+const inputFooterProps = {
+  helper: String,
+  error: String,
+}
+
+export type InputFooterProps = ExtractPublicPropTypes<typeof inputFooterProps>
+
+type InternalClasses = 'wrapper' | 'helperText' | 'errorText'
+export interface InputFooterTheme extends ThemeComponent<InputFooterProps, InternalClasses> {}
+
+export default { name: 'XInputFooter' }
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(inputFooterProps)
+
+const { styles, classes, className } = useTheme('InputFooter', {}, props)
+</script>
+
+<template>
+  <div :class="[className, classes.wrapper]" :style="styles">
+    <p v-if="error" :class="classes.errorText">{{ error }}</p>
+    <p v-else-if="helper" :class="classes.helperText">{{ helper }}</p>
+  </div>
+</template>

package/src/components/inputFooter/__tests__/InputFooter.spec.ts

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

package/src/components/inputFooter/index.ts

@@ -0,0 +1,2 @@
+export { default as XInputFooter } from './InputFooter.vue'
+export type { InputFooterProps, InputFooterTheme } from './InputFooter.vue'

package/src/components/inputFooter/theme/InputFooter.base.theme.ts

@@ -0,0 +1,11 @@
+import type { InputFooterTheme } from '../InputFooter.vue'
+
+const theme: InputFooterTheme = {
+  classes: {
+    wrapper: 'min-h-[1.3rem] text-sm mt-1',
+    helperText: 'text-gray-500 dark:text-gray-400',
+    errorText: 'text-red-500 dark:text-red-400',
+  },
+}
+
+export default theme

package/src/components/inputFooter/theme/InputFooter.carbon.theme.ts

@@ -0,0 +1,11 @@
+import type { InputFooterTheme } from '../InputFooter.vue'
+
+const theme: InputFooterTheme = {
+  classes: {
+    wrapper: 'text-xs mt-1',
+    helperText: 'text-gray-500 dark:text-gray-400',
+    errorText: 'text-red-500 dark:text-red-400',
+  },
+}
+
+export default theme