@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/textarea/Textarea.vue

@@ -0,0 +1,147 @@
+<script lang="ts">
+const textareaProps = {
+  ...useCommon.props(),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  dir: {
+    type: String,
+    default: 'ltr',
+  },
+  rows: {
+    type: [Number, String],
+    default: 2,
+  },
+  max: [Number, String],
+  maxlength: [Number, String],
+  min: [Number, String],
+  minlength: [Number, String],
+  placeholder: String,
+  adjustToText: Boolean,
+  preventEnter: Boolean,
+  block: Boolean,
+}
+
+export type TextareaProps = ExtractPublicPropTypes<typeof textareaProps>
+
+type InternalClasses = 'wrapper' | 'input'
+type InternalExtraData = { errorInternal: Ref<boolean>; }
+
+export interface TextareaTheme extends ThemeComponent<TextareaProps, InternalClasses, InternalExtraData> {}
+
+export default {
+  name: 'XTextarea',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch, type ExtractPublicPropTypes, type Ref } from 'vue'
+import { useResizeObserver, useEventListener } from '@vueuse/core'
+import { useCSS } from '../../composables/useCSS'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useInputtable } from '../../composables/useInputtable'
+import { useInteractive } from '../../composables/useInteractive'
+
+import XLabel from '../label/Label.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
+
+const props = defineProps(textareaProps)
+
+const emit = defineEmits(useInputtable.emits())
+
+const elRef = ref<HTMLTextAreaElement | null>(null)
+
+useResizeObserver(elRef, resize)
+if (typeof window !== 'undefined') useEventListener(window, '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,
+  hideFooterInternal,
+  isInsideForm,
+  inputListeners,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit })
+
+const { styles, classes, className } = useTheme('Textarea', {}, 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,
+    ]"
+  >
+    <textarea
+      :id="id"
+      ref="elRef"
+      class=""
+      :style="style"
+      :class="[
+        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"
+      :maxlength="maxlength"
+      :min="min"
+      :dir="dir"
+      :rows="rows"
+      :minlength="minlength"
+      :name="name"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :value="modelValue ? String(modelValue) : ''"
+      v-on="inputListeners"
+      @keydown.enter="onEnter"
+      @input="onInput"
+    ></textarea>
+
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
+  </x-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/textarea/index.ts

@@ -0,0 +1,2 @@
+export { default as XTextarea } from './Textarea.vue'
+export type { TextareaProps, TextareaTheme } from './Textarea.vue'

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

@@ -0,0 +1,27 @@
+import type { TextareaTheme } from '../Textarea.vue'
+
+const theme: TextareaTheme = {
+  classes: {
+    wrapper: '',
+
+    input: ({ props, data }) => {
+      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
+    },
+  },
+}
+
+export default theme

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

@@ -0,0 +1,29 @@
+import type { TextareaTheme } from '../Textarea.vue'
+
+const theme: TextareaTheme = {
+  classes: {
+    wrapper: '',
+
+    input: ({ props, data }) => {
+      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-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
+    },
+  },
+}
+
+export default theme

package/src/components/themeProvider/ThemeProvider.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+export default { name: 'XThemeProvider' }
+</script>
+
+<script setup lang="ts">
+import { watchEffect, ref, inject, provide, type PropType, unref } from 'vue'
+import { injectThemeKey } from '../../composables/keys'
+import { injectThemeStyles, type UITheme } from '../../theme'
+
+const props = defineProps({
+  theme: Object as PropType<UITheme>,
+})
+
+const initialTheme = inject(injectThemeKey, {})
+const theme = ref<UITheme>(props.theme || unref(initialTheme) || {})
+
+provide(injectThemeKey, theme)
+
+watchEffect(() => {
+  theme.value = props.theme || unref(initialTheme) || {}
+
+  if (theme.value.styles) injectThemeStyles(theme.value.name || '', theme.value.styles)
+})
+</script>
+
+<template>
+  <slot></slot>
+</template>

package/src/components/themeProvider/index.ts

@@ -0,0 +1 @@
+export { default as XThemeProvider } from './ThemeProvider.vue'

package/src/components/toggle/Toggle.vue

@@ -0,0 +1,122 @@
+<script lang="ts">
+const toggleProps = {
+  ...useCommon.props(),
+  ...useColors.props('primary'),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  glow: Boolean,
+}
+
+export type ToggleProps = ExtractPublicPropTypes<typeof toggleProps>
+
+type InternalClasses = 'wrapper' | 'label' | 'buttonWrapper' | 'button'
+export interface ToggleTheme extends ThemeComponent<ToggleProps, InternalClasses> {}
+
+export default {
+  name: 'XToggle',
+  validators: {
+    ...useCommon.validators(),
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, type ExtractPublicPropTypes } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useCommon } from '../../composables/useCommon'
+import { useColors } from '../../composables/useColors'
+import { useInputtable } from '../../composables/useInputtable'
+import { useInteractive } from '../../composables/useInteractive'
+
+import XSpinner from '../../components/spinner/Spinner.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
+
+const props = defineProps(toggleProps)
+
+const emit = defineEmits(useInputtable.emits(false))
+
+const elRef = ref<HTMLElement | null>(null)
+
+const checked = computed({
+  get(): boolean {
+    return !!props.modelValue
+  },
+  set(val: boolean) {
+    emit('update:modelValue', val)
+  },
+})
+
+const { focus, blur } = useInteractive(elRef)
+
+const {
+  errorInternal,
+  hideFooterInternal,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit, withListeners: false })
+
+const { styles, classes, className } = useTheme('Toggle', {}, props)
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <label
+    class="inline-block"
+    :class="[
+      className,
+      classes.wrapper,
+      disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+    ]"
+  >
+    <div class="flex items-center">
+      <div
+        class="flex items-center rounded-full transition-colors duration-300 border-[3px] shrink-0 !border-transparent"
+        :style="styles"
+        :class="{
+          [`shadow-lg shadow-${color}-500/50`]: glow && modelValue,
+          'bg-gray-300 dark:bg-gray-500': !disabled && !checked && !loading,
+          'bg-gray-100 dark:bg-gray-700': disabled || loading,
+          'bg-[color:var(--x-toggle-bg)] dark:bg-[color:var(--x-toggle-dark-bg)]': !disabled && checked,
+        }"
+      >
+        <div :class="classes.buttonWrapper">
+          <input
+            :id="id"
+            ref="elRef"
+            v-model="checked"
+            :aria-checked="checked ? 'true' : 'false'"
+            :aria-disabled="disabled ? 'true' : undefined"
+            type="checkbox"
+            class="hidden"
+            :disabled="disabled || loading"
+            :name="name"
+            :required="required"
+            :value="modelValue"
+          />
+          <div
+            :class="[
+              classes.button,
+              {
+                'translate-x-full': checked,
+                'shadow': !disabled
+              },
+              disabled ? 'bg-gray-50 dark:bg-gray-800' : 'bg-white dark:bg-gray-800'
+            ]"
+          ></div>
+        </div>
+      </div>
+      <span
+        v-if="label"
+        class="ml-2"
+        :class="classes.label"
+        v-text="label"
+      >
+      </span>
+      <x-spinner v-if="loading" :size="size" class="ml-1" />
+    </div>
+
+    <x-input-footer v-if="!hideFooterInternal" :error="errorInternal" :helper="helper"/>
+  </label>
+</template>

package/src/components/toggle/__tests__/Toggle.spec.ts

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

package/src/components/toggle/index.ts

@@ -0,0 +1,2 @@
+export { default as XToggle } from './Toggle.vue'
+export type { ToggleProps, ToggleTheme } from './Toggle.vue'

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

@@ -0,0 +1,53 @@
+import type { ToggleTheme } from '../Toggle.vue'
+
+const theme: ToggleTheme = {
+  classes: {
+    wrapper: '',
+
+    label: ({ props }) => {
+      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 }) => {
+      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 }) => {
+      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 }) => {
+    const color = colors.getPalette(props.color)
+
+    return css.variables({
+      bg: color[500],
+      dark: {
+        bg: color[600],
+      },
+    })
+  },
+}
+
+export default theme

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

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

package/src/components/tooltip/Tooltip.vue

@@ -0,0 +1,26 @@
+<script lang="ts">
+const tooltipProps = {}
+
+export type TooltipProps = ExtractPublicPropTypes<typeof tooltipProps>
+
+export default { name: 'XTooltip' }
+</script>
+
+<script setup lang="ts">
+import type { ExtractPublicPropTypes } from 'vue'
+import XPopover from '../../components/popover/Popover.vue'
+import XPopoverContainer from '../../components/popover/PopoverContainer.vue'
+</script>
+
+<template>
+  <x-popover :triggers="['hover']" class="inline-block">
+    <slot></slot>
+    <template #content>
+      <div class="dark">
+        <x-popover-container class="p-2 text-white text-sm w-max max-w-xs">
+          <slot name="tooltip"></slot>
+        </x-popover-container>
+      </div>
+    </template>
+  </x-popover>
+</template>

package/src/components/tooltip/__tests__/Tooltip.spec.ts

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

package/src/components/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { default as XTooltip } from './Tooltip.vue'
+export type { TooltipProps } from './Tooltip.vue'

package/src/composables/index.ts

@@ -0,0 +1,7 @@
+export * from './keys'
+export * from './useCommon'
+export * from './useColors'
+export * from './useCSS'
+export * from './useInputtable'
+export * from './useInteractive'
+export * from './useNotifications'

package/src/composables/keys.ts

@@ -0,0 +1,20 @@
+import type { InjectionKey, MaybeRef } from 'vue'
+import type { FormInjection } from '../components/form/Form.vue'
+import type { TabGroupInjection } from '../components/tab/TabGroup.vue'
+import type { ButtonGroupInjection } from '../components/button/ButtonGroup.vue'
+import type { NotificationInjection } from '../components/notifications/Notifications.vue'
+import type { IconInjection } from '../components/icon/Icon.vue'
+import type { FormGroupInjection } from '../components/formGroup'
+import type { AccordionProps } from '../components/accordion'
+import type { UIOptions } from '../create'
+import type { UITheme } from '../theme'
+
+export const injectOptionsKey = Symbol() as InjectionKey<UIOptions>
+export const injectThemeKey = Symbol() as InjectionKey<MaybeRef<UITheme>>
+export const injectTabGroupKey = Symbol() as InjectionKey<TabGroupInjection>
+export const injectFormKey = Symbol() as InjectionKey<FormInjection>
+export const injectFormGroupKey = Symbol() as InjectionKey<FormGroupInjection>
+export const injectIconsKey = Symbol() as InjectionKey<IconInjection>
+export const injectButtonGroupKey = Symbol() as InjectionKey<ButtonGroupInjection>
+export const injectNotificationKey = Symbol() as InjectionKey<NotificationInjection>
+export const injectAccordionKey = Symbol() as InjectionKey<AccordionProps>

package/src/composables/useCSS.ts

@@ -0,0 +1,50 @@
+const themes = ['dark']
+const modifiers = ['hover', 'active', 'focus', 'visited']
+
+const isTheme = (theme: string) => themes.includes(theme)
+const isModifier = (modifier: string) => modifiers.includes(modifier)
+
+export interface CSSComposition {
+  get: (name: string, value: string, theme?: string, modifier?: string) => string;
+  variable: (name: string, theme?: string, modifier?: string) => string;
+  variables: (object: Record<string, string | object>, theme?: string, modifier?: string) => Record<string, string>;
+}
+
+export const useCSS = (namespace?: string): CSSComposition => {
+  const get = (name: string, value: string, theme?: string, modifier?: string) => `${variable(name, theme, modifier)}: ${value}`
+
+  const variable = (name: string, theme?: string, modifier?: string) =>
+    `--x${namespace ? `-${namespace}` : ''}${theme ? `-${theme}` : ''}-${name}${modifier ? `-${modifier}` : ''}`
+
+  const variables = (object: Record<string, string | object>, theme?: string, modifier?: string) => {
+    let styles: Record<string, string> = {}
+
+    for (const key in object) {
+      const keyValue = object[key]
+
+      if (!keyValue) break
+
+      if (isTheme(key)) {
+        styles = {
+          ...styles,
+          ...variables(<any>keyValue, key, modifier),
+        }
+      } else if (isModifier(key)) {
+        styles = {
+          ...styles,
+          ...variables(<any>keyValue, theme, key),
+        }
+      } else {
+        styles[variable(key, theme, modifier)] = <string>keyValue
+      }
+    }
+
+    return styles
+  }
+
+  return {
+    get,
+    variable,
+    variables,
+  }
+}

package/src/composables/useColors.ts

@@ -0,0 +1,98 @@
+import { computed, inject, unref } from 'vue'
+import { injectThemeKey } from './keys'
+import { isValidColor, tailwindColors, colorShade, setOpacity } from '../common/colors'
+import { mergeRightDeep } from '../common/utils'
+
+export type Tone = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950'
+
+export interface ColorPalette {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  950: string;
+}
+
+export type ColorLibrary = Record<string, ColorPalette>
+
+export interface ColorsProps {
+  color?: string;
+}
+
+export interface ColorComposition {
+  getPalette: (color?: string) => ColorPalette;
+  getColorOpacity: (color: string, opacity: number) => string;
+}
+
+const colorCache: ColorLibrary = {}
+
+const defaultColors = {
+  primary: tailwindColors.sky,
+  secondary: tailwindColors.slate,
+  success: tailwindColors.green,
+  warning: tailwindColors.yellow,
+  error: tailwindColors.red,
+}
+
+const getTailwindColor = (color: string) => tailwindColors[color]
+
+const getColorOpacity = (color: string, opacity: number) => setOpacity(color, opacity)
+
+export const useColors = (): ColorComposition => {
+  const globalTheme = inject(injectThemeKey,  {})
+  const customColors = computed(() => mergeRightDeep(defaultColors, unref(globalTheme).colors || {}))
+
+  const getPalette = (color?: string): ColorPalette => {
+    if (!color) return getTailwindColor('gray')
+
+    const twColor = getTailwindColor(color)
+
+    if (twColor) return twColor
+    if (colorCache[color]) return colorCache[color]
+    if (customColors.value[color]) return customColors.value[color]
+
+    if (!isValidColor(color)) {
+      console.warn(`Invalid color: ${color}`)
+
+      return getTailwindColor('gray')
+    }
+
+    const palette = {
+      50: colorShade(color, 0.9),
+      100: colorShade(color, 0.8),
+      200: colorShade(color, 0.6),
+      300: colorShade(color, 0.4),
+      400: colorShade(color, 0.1),
+      500: color,
+      600: colorShade(color, -0.1),
+      700: colorShade(color, -0.25),
+      800: colorShade(color, -0.58),
+      900: colorShade(color, -0.7),
+      950: colorShade(color, -0.8),
+    }
+
+    colorCache[color] = palette
+
+    return palette
+  }
+
+  return {
+    getPalette,
+    getColorOpacity,
+  }
+}
+
+export type UseColorsProps = ReturnType<typeof useColors.props>
+
+useColors.props = (defaultColor?: string) => ({
+  color: {
+    type: String,
+    default: defaultColor,
+  },
+} as const)