@indielayer/ui 0.0.0-dev-20240125104319

package/src/components/drawer/Drawer.vue

@@ -0,0 +1,249 @@
+<script lang="ts">
+const drawerPosition = ['left', 'right', 'top', 'bottom'] as const
+const drawerProps = {
+  modelValue: Boolean,
+  position: {
+    type: String as PropType<DrawerPosition>,
+    default: 'left',
+  },
+  teleportTo: {
+    type: [String, Object] as PropType<string | HTMLElement>,
+    default: 'body',
+  },
+  width: {
+    type: [String, Number],
+    default: 320,
+  },
+  height: {
+    type: [String, Number],
+    default: 320,
+  },
+  breakpoint: [String, Number],
+  backdrop: {
+    type: Boolean,
+    default: true,
+  },
+}
+
+export type DrawerPosition = typeof drawerPosition[number]
+export type DrawerProps = ExtractPublicPropTypes<typeof drawerProps>
+
+type InternalClasses = 'wrapper' | 'backdrop'
+export interface DrawerTheme extends ThemeComponent<DrawerProps, InternalClasses> {}
+
+export default {
+  name: 'XDrawer',
+  inheritAttrs: false,
+  validators: {
+    position: drawerPosition,
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, watchEffect, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { breakpointsTailwind, useBreakpoints, useEventListener, useSwipe, type Breakpoints, type UseSwipeDirection } from '@vueuse/core'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+import XScroll from '../../components/scroll/Scroll.vue'
+
+const props = defineProps(drawerProps)
+
+const emit = defineEmits(['update:modelValue'])
+
+const detached = ref<boolean>(true)
+const value = ref<boolean>(props.modelValue)
+const backdropRef = ref<HTMLElement | null>(null)
+const drawerRef = ref<HTMLElement | null>(null)
+
+const deferShow = ref<boolean>(false)
+
+const isTailwindBreakpoint = typeof props.breakpoint === 'string'
+const breakpoints = useBreakpoints(isTailwindBreakpoint ? breakpointsTailwind : { md: props.breakpoint || 768 } as Breakpoints)
+const point = breakpoints.smaller(isTailwindBreakpoint ? props.breakpoint : 'md')
+
+watchEffect(() => {
+  if (props.breakpoint) {
+    if (point.value) {
+      detached.value = true
+      close()
+    } else {
+      detached.value = false
+      open()
+    }
+  }
+})
+
+useEventListener(backdropRef, 'pointerdown', close)
+
+watch(() => props.modelValue, (val) => {
+  value.value = val
+})
+
+if (typeof window !== 'undefined') useEventListener(document, 'keydown', onKeyDown)
+
+function onKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && value.value) close()
+}
+
+const { lengthX, lengthY } = useSwipe(drawerRef, {
+  // passive: false,
+  // onSwipe(e: TouchEvent) {
+  //   if (lengthX.value < 0) {
+  //     const length = Math.abs(lengthX.value)
+  //     left.value = `${length}px`
+  //   } else {
+  //     left.value = '0'
+  //   }
+  // },
+  // onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
+  //   if (lengthX.value < 0 && props.width && (Math.abs(lengthX.value) / props.width) >= 0.5) {
+  //     left.value = '100%'
+  //   } else {
+  //     left.value = '0'
+  //   }
+  // },
+  onSwipeEnd(e: TouchEvent, direction: UseSwipeDirection) {
+    if (detached.value) {
+      if (
+        (props.position === 'left' && direction === 'left') ||
+            (props.position === 'right' && direction === 'right') ||
+            (props.position === 'top' && direction === 'up') ||
+            (props.position === 'bottom' && direction === 'down')
+      ) close()
+    }
+  },
+})
+
+const autoStyles = computed(() => {
+  const s: Record<string, string> = {}
+
+  if (props.position === 'left' || props.position === 'right') s['width'] = `${props.width}px`
+  else if (props.position === 'top' || props.position === 'bottom') s['height'] = `${props.height}px`
+
+  return s
+})
+
+const autoClasses = computed(() => {
+  const c = []
+
+  if (detached.value) {
+    c.push('absolute shadow-lg')
+
+    if (props.position === 'top') c.push('top-0 inset-x-0')
+    else if (props.position === 'bottom') c.push('bottom-0 inset-x-0')
+    else if (props.position === 'left') c.push('left-0 inset-y-0')
+    else if (props.position === 'right') c.push('right-0 inset-y-0')
+  }
+
+  return c
+})
+
+function onBeforeEnter(el: Element) {
+  el.classList.add('inset-0')
+  if (props.position === 'top') (el as HTMLElement).style.top = `-${props.height}px`
+  else if (props.position === 'bottom') (el as HTMLElement).style.bottom = `-${props.height}px`
+  else if (props.position === 'left') (el as HTMLElement).style.left = `-${props.width}px`
+  else if (props.position === 'right') (el as HTMLElement).style.right = `-${props.width}px`
+}
+
+function onEnter(el: Element, done: () => void) {
+  if (!detached.value) {
+    done()
+
+    return
+  }
+  el.addEventListener('transitionend', done)
+  setTimeout(() => {
+    if (props.backdrop) el.classList.add('bg-gray-500/30')
+    if (props.position === 'top') (el as HTMLElement).style.top = '0'
+    else if (props.position === 'bottom') (el as HTMLElement).style.bottom = '0'
+    else if (props.position === 'left') (el as HTMLElement).style.left = '0'
+    else if (props.position === 'right') (el as HTMLElement).style.right = '0'
+  }, 1)
+}
+
+function onBeforeLeave(el: Element) {}
+
+function onLeave(el: Element, done: () => void) {
+  el.addEventListener('transitionend', done)
+  setTimeout(() => {
+    if (props.backdrop) el.classList.remove('bg-gray-500/30')
+    if (props.position === 'top') (el as HTMLElement).style.top = `-${props.height}px`
+    else if (props.position === 'bottom') (el as HTMLElement).style.bottom = `-${props.height}px`
+    else if (props.position === 'left') (el as HTMLElement).style.left = `-${props.width}px`
+    else if (props.position === 'right') (el as HTMLElement).style.right = `-${props.width}px`
+  }, 1)
+}
+
+function onAfterLeave(el: Element) {
+  el.classList.remove('inset-0')
+}
+
+function close(e?: PointerEvent) {
+  if (e && e.target !== backdropRef.value) return
+  value.value = false
+  emit('update:modelValue', false)
+}
+
+function open() {
+  value.value = true
+  emit('update:modelValue', true)
+}
+
+onMounted(() => {
+  deferShow.value = true
+})
+
+const { styles, classes, className } = useTheme('Drawer', {}, props)
+
+defineExpose({ open, close })
+</script>
+
+<template>
+  <teleport v-if="deferShow" :to="teleportTo" :disabled="!detached">
+    <transition
+      :css="false"
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+      @after-leave="onAfterLeave"
+    >
+      <div
+        v-show="breakpoint ? (value && point || !point) : value"
+        ref="backdropRef"
+        :class="[
+          $attrs.class,
+          classes.backdrop,
+          detached || !breakpoint ? 'absolute z-40' : '',
+        ]"
+      >
+        <div
+          v-if="detached && value"
+          ref="swipeRef"
+          class="flex flex-col max-h-full"
+        ></div>
+        <div
+          ref="drawerRef"
+          :class="[
+            className,
+            autoClasses,
+            classes.wrapper
+          ]"
+          :style="[autoStyles, styles]"
+        >
+          <slot name="header"></slot>
+          <x-scroll
+            :scrollbar="false"
+            vertical
+            class="flex-1"
+          >
+            <slot></slot>
+          </x-scroll>
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>

package/src/components/drawer/__tests__/Drawer.spec.ts

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

package/src/components/drawer/index.ts

@@ -0,0 +1,2 @@
+export { default as XDrawer } from './Drawer.vue'
+export type { DrawerProps, DrawerPosition, DrawerTheme } from './Drawer.vue'

package/src/components/drawer/theme/Drawer.base.theme.ts

@@ -0,0 +1,11 @@
+import type { DrawerTheme } from '../Drawer.vue'
+
+const theme: DrawerTheme = {
+  classes: {
+    wrapper: 'flex flex-col max-h-full bg-white dark:bg-gray-800',
+
+    backdrop: 'duration-150 ease-in-out',
+  },
+}
+
+export default theme

package/src/components/drawer/theme/Drawer.carbon.theme.ts

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

package/src/components/form/Form.vue

@@ -0,0 +1,159 @@
+<script lang="ts">
+const formProps = {
+  autoValidate: {
+    type: Boolean,
+    default: true,
+  },
+  autoFocus: {
+    type: Boolean,
+    default: true,
+  },
+  disabled: Boolean,
+  errors: {
+    type: [Array, Object] as PropType<[FormError[], FormError]>,
+    default: () => ([]),
+  },
+  title: String,
+  description: String,
+  hasFooter: {
+    type: Boolean,
+    default: true,
+  },
+}
+
+export type FormProps = ExtractPublicPropTypes<typeof formProps>
+
+export type FormInjection = {
+  registerInput: (name: string, focus: () => void, validate: () => boolean, setError: (val: string) => void) => void;
+  unregisterInput: (name: string) => void;
+  isInsideForm: boolean;
+}
+
+export type FormError = {
+  field: string;
+  msg: string;
+}
+
+export type FormInput = {
+  name: string;
+  focus: () => void;
+  validate: (val?: any) => boolean;
+  setError: (val: string) => void;
+}
+
+type InternalClasses = 'wrapper' | 'content' | 'title' | 'description' | 'footer'
+export interface FormTheme extends ThemeComponent<FormProps, InternalClasses> {}
+
+export default {
+  name: 'XForm',
+}
+</script>
+
+<script setup lang="ts">
+import { provide, onMounted, watch, nextTick, type PropType, type ExtractPublicPropTypes } from 'vue'
+import { injectFormKey } from '../../composables/keys'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+const props = defineProps(formProps)
+
+const emit = defineEmits(['submit'])
+
+const inputs: FormInput[] = []
+
+provide(injectFormKey, {
+  registerInput: (name: string, focus: () => void, validate: (val: any) => boolean, setError: (val: string) => void) => {
+    const exists = inputs.find((i) => i.name === name)
+
+    if (exists) {
+      exists.focus = focus
+      exists.validate = validate
+      exists.setError = setError
+    } else inputs.push({ name, focus, validate, setError })
+  },
+  unregisterInput: (name: string) => {
+    const index = inputs.findIndex((i) => i.name === name)
+
+    inputs.splice(index, 1)
+  },
+  isInsideForm: true,
+})
+
+onMounted(async () => {
+  if (props.autoFocus && inputs && inputs.length > 0) {
+    setTimeout(inputs[0].focus, 50)
+  }
+})
+
+watch(() => props.errors, (errors) => {
+  if (errors) nextTick(() => {
+    if (Array.isArray(errors)) errors.forEach((error: any) => {
+      const input = inputs.find((i) => i.name === error.field)
+
+      if (input) input.setError(error.msg)
+    })
+
+    else {
+      const input = inputs.find((i) => i.name === (errors as FormError).field)
+
+      if (input) input.setError((errors as FormError).msg)
+    }
+  })
+})
+
+const validate = () => {
+  let isFormValid = true
+
+  inputs.forEach((input) => {
+    const isInputValid = input.validate()
+
+    if (!isInputValid && isFormValid) {
+      isFormValid = false
+
+      // focus on input error
+      if (input.focus) input.focus()
+    }
+  })
+
+  return isFormValid
+}
+
+const submit = (e: Event) => {
+  e.preventDefault()
+  e.stopPropagation()
+
+  const isFormValid = props.autoValidate ? validate() : true
+
+  emit('submit', isFormValid)
+}
+
+const { styles, classes, className } = useTheme('Form', {}, props)
+</script>
+
+<template>
+  <form
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper
+    ]"
+    @submit="submit"
+  >
+    <slot name="header">
+      <div v-if="title || description" class="mb-10">
+        <p v-if="title" :class="classes.title">{{ title }}</p>
+        <p v-if="description" :class="classes.description">{{ description }}</p>
+      </div>
+    </slot>
+
+    <fieldset :disabled="disabled" :class="classes.content">
+      <slot></slot>
+    </fieldset>
+
+    <slot v-if="hasFooter" name="footer">
+      <div :class="classes.footer">
+        <slot name="primary-action"></slot>
+        <slot name="secondary-action"></slot>
+      </div>
+    </slot>
+  </form>
+</template>

package/src/components/form/__tests__/Form.spec.ts

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

package/src/components/form/index.ts

@@ -0,0 +1,2 @@
+export { default as XForm } from './Form.vue'
+export type { FormProps, FormError, FormInjection, FormInput, FormTheme } from './Form.vue'

package/src/components/form/theme/Form.base.theme.ts

@@ -0,0 +1,17 @@
+import type { FormTheme } from '../Form.vue'
+
+const theme: FormTheme = {
+  classes: {
+    wrapper: 'relative',
+
+    content: 'grid gap-4',
+
+    title: 'text-xl mb-1',
+
+    description: 'text-gray-500',
+
+    footer: 'space-x-4 mt-4',
+  },
+}
+
+export default theme

package/src/components/form/theme/Form.carbon.theme.ts

@@ -0,0 +1,17 @@
+import type { FormTheme } from '../Form.vue'
+
+const theme: FormTheme = {
+  classes: {
+    wrapper: 'relative',
+
+    content: 'grid',
+
+    title: 'text-xl mb-1',
+
+    description: 'text-gray-500',
+
+    footer: 'grid grid-cols-2 gap-4 lg:flex mt-8',
+  },
+}
+
+export default theme

package/src/components/formGroup/FormGroup.vue

@@ -0,0 +1,116 @@
+<script lang="ts">
+const formGroupProps = {
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  vertical: {
+    type: Boolean,
+    default: false,
+  },
+}
+
+export type FormGroupProps = ExtractPublicPropTypes<typeof formGroupProps>
+
+export type FormGroupInjection = {
+  registerInputGroup: (name: string, focus: () => void) => void;
+  unregisterInputGroup: (name: string) => void;
+  setValue: (val: string | number | string[] | number[]) => void;
+  value: MaybeRef<string | number | string[] | number[] | null | undefined>;
+  isInsideFormGroup: boolean;
+}
+
+export type FormGroupInput = {
+  name: string;
+  focus: () => void;
+}
+
+type InternalClasses = 'wrapper'
+export interface FormGroupTheme extends ThemeComponent<FormGroupProps, InternalClasses> {}
+
+export default {
+  name: 'XFormGroup',
+}
+</script>
+
+<script setup lang="ts">
+import { provide, computed, type ExtractPublicPropTypes, type MaybeRef } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useInteractive } from '../../composables/useInteractive'
+import { useInputtable } from '../../composables/useInputtable'
+import { injectFormGroupKey } from '../../composables/keys'
+
+import XLabel from '../label/Label.vue'
+import XInputFooter from '../inputFooter/InputFooter.vue'
+
+const props = defineProps(formGroupProps)
+
+const inputs: FormGroupInput[] = []
+
+const value = computed<string | number | string[] | number[]>(() => {
+  if (typeof props.modelValue === 'string') return props.modelValue
+  if (typeof props.modelValue === 'number') return props.modelValue
+  if (Array.isArray(props.modelValue)) return props.modelValue
+
+  return ''
+})
+
+provide(injectFormGroupKey, {
+  registerInputGroup: (name: string, focus: () => void) => {
+    inputs.push({ name, focus })
+  },
+  unregisterInputGroup: (name: string) => {
+    const index = inputs.findIndex((i) => i.name === name)
+
+    inputs.splice(index, 1)
+  },
+  setValue: (val) => {
+    emit('update:modelValue', val)
+  },
+  isInsideFormGroup: true,
+  value,
+})
+
+function focus() {
+  inputs[0]?.focus()
+}
+
+const emit = defineEmits(useInputtable.emits())
+
+const {
+  errorInternal,
+  isInsideForm,
+  isFirstValidation,
+  reset,
+  validate,
+  setError,
+} = useInputtable(props, { focus, emit })
+
+const listeners = {
+  change: (event: Event) => {
+    if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+  },
+}
+
+const { styles, classes, className } = useTheme('FormGroup', {}, props, { errorInternal })
+
+defineExpose({ focus, blur, reset, validate, setError })
+</script>
+
+<template>
+  <x-label
+    tag="fieldset"
+    :style="styles"
+    :disabled="disabled"
+    :required="required"
+    :is-inside-form="isInsideForm"
+    :label="label"
+    :class="[
+      className,
+    ]"
+    v-on="listeners"
+  >
+    <div :class="classes.wrapper">
+      <slot></slot>
+    </div>
+    <x-input-footer v-if="!hideFooter" :error="errorInternal" :helper="helper"/>
+  </x-label>
+</template>

package/src/components/formGroup/__tests__/FormGroup.spec.ts

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

package/src/components/formGroup/index.ts

@@ -0,0 +1,2 @@
+export { default as XFormGroup } from './FormGroup.vue'
+export type { FormGroupProps, FormGroupInjection, FormGroupInput, FormGroupTheme } from './FormGroup.vue'

package/src/components/formGroup/theme/FormGroup.base.theme.ts

@@ -0,0 +1,16 @@
+import type { FormGroupTheme } from '../FormGroup.vue'
+
+const theme: FormGroupTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['']
+
+      if (!props.vertical) classes.push('flex gap-2')
+      else classes.push('grid gap-1')
+
+      return classes
+    },
+  },
+}
+
+export default theme

package/src/components/formGroup/theme/FormGroup.carbon.theme.ts

@@ -0,0 +1,16 @@
+import type { FormGroupTheme } from '../FormGroup.vue'
+
+const theme: FormGroupTheme = {
+  classes: {
+    wrapper: ({ props }) => {
+      const classes = ['']
+
+      if (!props.vertical) classes.push('flex gap-4')
+      else classes.push('grid gap-3')
+
+      return classes
+    },
+  },
+}
+
+export default theme