@indielayer/ui 0.0.0-dev-20240125104319

package/src/composables/useCommon.ts

@@ -0,0 +1,21 @@
+import type { PropType } from 'vue'
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export const useCommon = () => {}
+
+const validators = Object.freeze({
+  size: ['xs', 'sm', 'md', 'lg', 'xl'],
+})
+
+useCommon.props = () => ({
+  size: {
+    type: String as PropType<Size>,
+    default: 'md',
+    validator: (value: string) => validators.size.includes(value),
+  },
+} as const)
+
+useCommon.validators = () => ({
+  ...validators,
+})

package/src/composables/useFocusTrap.ts

@@ -0,0 +1,106 @@
+import type { ComponentPublicInstance } from 'vue'
+import { onUnmounted, type MaybeRef, unref, nextTick } from 'vue'
+
+const focusableQuery = 'button:not([tabindex="-1"]), [href], input, select, textarea, li, a, [tabindex]:not([tabindex="-1"])'
+
+export function useFocusTrap() {
+  let focusable: HTMLElement[] = []
+  let observer: MutationObserver | null = null
+
+  let firstFocusableEl: HTMLElement | null = null
+  let lastFocusableEl: HTMLElement | null = null
+
+  async function initFocusTrap(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
+    targetRef = unref(targetRef)
+
+    if (!targetRef) return
+
+    await nextTick()
+
+    getFocusableElements(targetRef)
+
+    if (firstFocusableEl) firstFocusableEl.focus()
+
+    document.addEventListener('keydown', handleKeydown)
+    observer = new MutationObserver(() => getFocusableElements(targetRef))
+
+    if ((targetRef as ComponentPublicInstance).$el) observer.observe((targetRef as ComponentPublicInstance).$el as Node, { childList: true, subtree: true })
+    else observer.observe(targetRef as Node, { childList: true, subtree: true })
+  }
+
+  function getFocusableElements(targetRef: MaybeRef<HTMLElement | ComponentPublicInstance | null>) {
+    if (targetRef === null) return
+
+    let elements
+
+    if ((targetRef as ComponentPublicInstance).$el) elements = (targetRef as ComponentPublicInstance)?.$el.querySelectorAll(focusableQuery)
+    else (targetRef as HTMLElement).querySelectorAll(focusableQuery)
+
+    focusable = Array.from(elements || []) as HTMLElement[]
+    firstFocusableEl = focusable[0] || null
+    lastFocusableEl = focusable[focusable.length - 1] || null
+  }
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      const isShiftPressed = event.shiftKey
+      const currentEl = document.activeElement as HTMLElement | null
+
+      if (!currentEl) {
+        event.preventDefault()
+        focusable[0]?.focus()
+
+        return
+      }
+
+      const firstEl = focusable[0]
+      const lastEl = focusable[focusable.length - 1]
+
+      if (!isShiftPressed && currentEl === lastEl) {
+        event.preventDefault()
+        firstEl?.focus()
+      } else if (isShiftPressed && currentEl === firstEl) {
+        event.preventDefault()
+        lastEl?.focus()
+      }
+
+    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+      event.preventDefault()
+      const currentEl = document.activeElement as HTMLElement
+      const index = focusable.indexOf(currentEl)
+      const previousEl = focusable[index - 1]
+
+      if (previousEl) {
+        previousEl.focus()
+      } else if (lastFocusableEl) {
+        lastFocusableEl.focus()
+      }
+
+    } else if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+      event.preventDefault()
+      const currentEl = document.activeElement as HTMLElement
+      const index = focusable.indexOf(currentEl)
+      const nextElement = focusable[index + 1]
+
+      if (nextElement) {
+        nextElement.focus()
+      } else if (firstFocusableEl) {
+        firstFocusableEl.focus()
+      }
+    }
+  }
+
+  const clearFocusTrap = () => {
+    document.removeEventListener('keydown', handleKeydown)
+    observer?.disconnect()
+  }
+
+  onUnmounted(() => {
+    clearFocusTrap()
+  })
+
+  return {
+    initFocusTrap,
+    clearFocusTrap,
+  }
+}

package/src/composables/useInputtable.ts

@@ -0,0 +1,172 @@
+import type { MaybeRef, PropType } from 'vue'
+import { ref, computed, inject, watch, onMounted, onUnmounted } from 'vue'
+import { injectFormGroupKey, injectFormKey } from './keys'
+
+export interface XFormInputMethods {
+  focus: () => void;
+  validate: (val: any) => boolean;
+  setError: (val: string) => void;
+}
+
+export const useInputtable = (props: any, { focus, emit, withListeners = true }: { focus: () => void; emit: any; withListeners?: boolean; }) => {
+  const isFirstValidation = ref(true)
+  const errorInternal = ref(props.error)
+  const hideFooterInternal = ref(props.hideFooter)
+
+  const name = props.name ? props.name : (Math.random() + 1).toString(36).substring(7)
+  const nameInternal = ref(name)
+
+  watch(() => props.error, (val) => { errorInternal.value = val })
+  watch(() => props.name, (val) => { if (val) nameInternal.value = val })
+
+  const formGroup = inject(injectFormGroupKey, {
+    registerInputGroup: () => {},
+    unregisterInputGroup: () => {},
+    setValue: () => {},
+    isInsideFormGroup: false,
+    value: undefined,
+  })
+
+  if (formGroup.isInsideFormGroup) {
+    hideFooterInternal.value = true
+  }
+
+  const form = inject(injectFormKey, {
+    registerInput: () => {},
+    unregisterInput: () => {},
+    isInsideForm: false,
+  })
+
+  const reset = () => {
+    errorInternal.value = ''
+    isFirstValidation.value = true
+    emit('update:modelValue', '')
+  }
+
+  const setError = (val: string) => {
+    errorInternal.value = val
+  }
+
+  const validate = (val?: any): boolean => {
+    val = val || props.modelValue
+
+    isFirstValidation.value = false
+
+    for (let i = 0; i < props.rules.length; i++) {
+      const item = props.rules[i]
+
+      let isValid = true
+
+      // Direct Function
+      if (typeof item === 'function') {
+        const rule = item
+
+        isValid = rule(val)
+      } else if (Array.isArray(item) && item.length === 2) {
+        // Rule array [function, options]
+        const { 0: rule, 1: options } = item
+
+        isValid = rule(val, options)
+      } else {
+        // Rule object { fn, options }
+        const rule = item.fn
+        const { options } = item
+
+        isValid = rule(val, options)
+      }
+
+      if (isValid !== true) {
+        errorInternal.value = isValid
+
+        return false
+      }
+    }
+
+    errorInternal.value = ''
+
+    return true
+  }
+
+  const isFocused = ref(false)
+
+  type InputListeners = {
+    focus: (event: Event) => void;
+    blur: (event: Event) => void;
+    input: (event: Event) => void;
+    change: (event: Event) => void;
+  }
+
+  const inputListeners: MaybeRef<InputListeners> = withListeners ? computed<InputListeners>(() => {
+    return {
+      focus: (event: Event) => { isFocused.value = true; emit('focus', event) },
+      blur: (event: Event) => { isFocused.value = false; emit('blur', event) },
+      input: (event: Event) => {
+        if (props.validateOnInput && !isFirstValidation.value) validate((event.target as HTMLInputElement).value)
+        emit('update:modelValue', (event.target as HTMLInputElement).value)
+      },
+      change: (event: Event) => emit('change', event),
+    }
+  }) : {
+    focus: () => {},
+    blur: () => {},
+    input: () => {},
+    change: () => {},
+  }
+
+  onMounted(() => {
+    if (formGroup.isInsideFormGroup) {
+      formGroup.registerInputGroup(nameInternal.value, focus)
+    } else {
+      form.registerInput(nameInternal.value, focus, validate, setError)
+    }
+  })
+
+  onUnmounted(() => {
+    if (formGroup.isInsideFormGroup) {
+      formGroup.unregisterInputGroup(nameInternal.value)
+    } else {
+      form.unregisterInput(nameInternal.value)
+    }
+
+  })
+
+  return {
+    isFirstValidation,
+    errorInternal,
+    hideFooterInternal,
+    isFocused,
+    isInsideForm: form.isInsideForm,
+    isInsideFormGroup: formGroup.isInsideFormGroup,
+    inputListeners,
+    formGroup,
+    reset,
+    validate,
+    setError,
+  }
+}
+
+useInputtable.emits = (withListeners = true): string[] => {
+  return withListeners ?
+    ['update:modelValue', 'blur', 'focus', 'input', 'change'] :
+    ['update:modelValue']
+}
+
+useInputtable.props = () => ({
+  modelValue: [String, Number, Boolean, Object, Array] as PropType<string | number | boolean | object | any[] | undefined>,
+  id: String,
+  name: String,
+  readonly: Boolean,
+  required: Boolean,
+  validateOnInput: {
+    type: Boolean,
+    default: true,
+  },
+  label: String,
+  helper: String,
+  error: String,
+  hideFooter: Boolean,
+  rules: {
+    type: Array,
+    default: () => [],
+  },
+} as const)

package/src/composables/useInteractive.ts

@@ -0,0 +1,28 @@
+import type { LoaderStatus } from 'src/components/loader/Loader.vue'
+import type { PropType, Ref } from 'vue'
+
+export interface InteractiveProps {
+  disabled?: boolean;
+  loading?: boolean;
+  loadingLabel?: string;
+  loadingStatus?: LoaderStatus;
+}
+
+export const useInteractive = (
+  el: Ref<HTMLElement | null>,
+) => {
+  return {
+    focus: () => el.value?.focus?.(),
+    blur: () => el.value?.blur?.(),
+  }
+}
+
+useInteractive.props = () => ({
+  disabled: Boolean,
+  loading: Boolean,
+  loadingLabel: String,
+  loadingStatus: {
+    type: String as PropType<LoaderStatus>,
+    default: 'active',
+  },
+} as const)

package/src/composables/useNotifications.ts

@@ -0,0 +1,11 @@
+import { inject } from 'vue'
+import { injectNotificationKey } from './keys'
+import type { NotificationInjection } from '../components/notifications/Notifications.vue'
+
+export const useNotifications = (key?: symbol | string) => {
+  const notifications = inject<NotificationInjection>(key || injectNotificationKey)
+
+  if (!notifications) console.warn('useNotifications must have a parent wrapped with Notifications component')
+
+  return notifications
+}

package/src/composables/useTheme.ts

@@ -0,0 +1,97 @@
+import { computed, inject, unref, useSlots, type Slots, type UnwrapNestedRefs, type UnwrapRef, type MaybeRef, type CSSProperties } from 'vue'
+import { injectThemeKey } from './keys'
+import { useColors, type ColorComposition } from './useColors'
+import { useCSS, type CSSComposition } from './useCSS'
+import { isFunction, isObject, mergeRightDeep, smartUnref } from '../common/utils'
+import type { ComponentThemes } from 'src/theme'
+
+export type Stylish = false | null | undefined | string | CSSProperties;
+export type StyleValue = Stylish | Array<Stylish>;
+
+export type ThemeVueClass = string | Record<string, boolean> | (string | Record<string, boolean>)[]
+export type ThemeClasses<P, K extends string = string, D = undefined> = Record<K, string | ((params: ThemeParams<P, D>) => ThemeVueClass)>
+export type ThemeStyles<P, D> = StyleValue | ((params: ThemeParams<P, D>) => StyleValue);
+export interface ThemeComponent<P = object, K extends string = string, D = object> {
+  classes?: Partial<ThemeClasses<P, K, D>>;
+  styles?: ThemeStyles<P, D>;
+}
+export type ThemeParams<P = Record<string, any>, D = Record<string, any>> = {
+  props: UnwrapRef<P>;
+  slots: Slots;
+  colors: ColorComposition;
+  css: CSSComposition;
+  rtl?: boolean;
+  data: UnwrapNestedRefs<D>;
+}
+
+export const useTheme = <P extends object = object, K extends string = string, D extends object = object>(namespace: keyof ComponentThemes, defaultTheme: ThemeComponent<P, K, D> = {}, props: MaybeRef<P> = {} as P, data: D = {} as D) => {
+  const userTheme = inject(injectThemeKey, {})
+
+  const rawClasses = computed(() => {
+    if (unref(userTheme)?.components?.[namespace]) return mergeRightDeep(defaultTheme.classes || {}, unref(userTheme).components?.[namespace].classes || {})
+
+    return defaultTheme.classes || {}
+  })
+
+  const cssNamespace = namespace.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`).replace(/^-/, '')
+
+  const classPrefix = computed(() => unref(userTheme)?.classPrefix ?? 'x-')
+  const className = computed(() => `${classPrefix.value}${cssNamespace}`)
+
+  const rtl = computed(() => unref(userTheme)?.rtl ?? false)
+
+  // compute theme
+  const slots = useSlots()
+  const colors = useColors()
+  const css = useCSS(cssNamespace)
+  const classes = computed<Record<K, ThemeVueClass>>(() => getClasses(rawClasses.value, {
+    props: unref(props),
+    slots,
+    data: smartUnref(data),
+    colors,
+    css,
+    rtl: unref(rtl),
+  }))
+
+  const styles = computed(() => {
+    const componentTheme = unref(userTheme)?.components?.[namespace] || {}
+    const params = {
+      props: unref(props),
+      slots,
+      data: smartUnref(data),
+      colors,
+      css,
+      rtl: unref(rtl),
+    }
+
+    return [
+      getStyles(defaultTheme.styles, params),
+      getStyles(componentTheme.styles, params),
+    ] as StyleValue
+  })
+
+  return {
+    classPrefix,
+    className,
+    colors,
+    classes,
+    styles,
+    css,
+  }
+}
+
+function getClasses(classes: any, params: ThemeParams): any {
+  const parsedClasses: Record<string, string> = {}
+
+  Object.keys(classes).forEach((key) => {
+    const x = classes[key]
+
+    parsedClasses[key] = isFunction(x) ? x(params) : (isObject(x) ? getClasses(x, params) : x)
+  })
+
+  return parsedClasses
+}
+
+function getStyles(styles: any, params: ThemeParams) {
+  return isFunction(styles) ? (styles(params) || {}) : (isObject(styles) ? styles : {})
+}

package/src/create.ts

@@ -0,0 +1,43 @@
+import type { App } from 'vue'
+import { injectIconsKey, injectOptionsKey, injectThemeKey } from './composables/keys'
+import { injectThemeStyles, type UITheme } from './theme'
+
+export type UIOptions = {
+  prefix?: string;
+  components?: any[];
+  icons?: Record<string, any>;
+  theme?: UITheme;
+}
+
+const defaultOptions: UIOptions = {
+  prefix: 'X',
+}
+
+const create = (createOptions: UIOptions = {}) => {
+  const install = (app: App, installOptions: UIOptions = {}) => {
+    const options: UIOptions = {
+      ...defaultOptions,
+      ...createOptions,
+      ...installOptions,
+    }
+
+    if (options.components)
+      options.components.forEach((component: any) => {
+        const name = component.name.startsWith('X') ? component.name.slice(1) : component.name
+
+        if (!app.component(`${options.prefix}${name}`)) app.component(`${options.prefix}${name}`, component)
+      })
+
+    app.provide(injectOptionsKey, options)
+    app.provide(injectIconsKey, options.icons || {})
+    app.provide(injectThemeKey, options.theme || {})
+
+    if (options.theme?.styles) injectThemeStyles(options.theme.name || '', options.theme.styles)
+  }
+
+  return {
+    install,
+  }
+}
+
+export default create

package/src/index.ts

@@ -0,0 +1,10 @@
+export { tailwindColors as colors } from './common/colors'
+export { default as version } from './version'
+export * from './components'
+export * from './composables'
+export * from './themes'
+export type { UITheme, ComponentThemes } from './theme'
+
+export { default as createUI, type UIOptions } from './create'
+
+export { default } from './install'

package/src/install.ts

@@ -0,0 +1,8 @@
+import * as components from './components'
+import create from './create'
+
+export default create({
+  components: Object.keys(components).map(
+    (key) => components[key as keyof object],
+  ),
+})

package/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+// shims-vue.d.ts
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/theme.ts

@@ -0,0 +1,125 @@
+import type { ColorLibrary } from './composables/useColors'
+import type {
+  AccordionTheme,
+  AccordionItemTheme,
+  AlertTheme,
+  AvatarTheme,
+  BadgeTheme,
+  BreadcrumbsTheme,
+  ButtonTheme,
+  ButtonGroupTheme,
+  CardTheme,
+  CarouselTheme,
+  CarouselSlideTheme,
+  CheckboxTheme,
+  ContainerTheme,
+  DividerTheme,
+  DrawerTheme,
+  FormTheme,
+  FormGroupTheme,
+  IconTheme,
+  ImageTheme,
+  InputTheme,
+  InputFooterTheme,
+  LabelTheme,
+  LinkTheme,
+  LoaderTheme,
+  MenuTheme,
+  MenuItemTheme,
+  ModalTheme,
+  NotificationsTheme,
+  PaginationTheme,
+  PaginationItemTheme,
+  PopoverTheme,
+  PopoverContainerTheme,
+  ProgressTheme,
+  RadioTheme,
+  ScrollTheme,
+  SelectTheme,
+  SkeletonTheme,
+  SliderTheme,
+  StepperTheme,
+  TabTheme,
+  TabGroupTheme,
+  TableTheme,
+  TableCellTheme,
+  TagTheme,
+  TextareaTheme,
+  ToggleTheme,
+} from './components'
+
+export type ComponentThemes = {
+  Accordion: AccordionTheme;
+  AccordionItem: AccordionItemTheme;
+  Alert: AlertTheme;
+  Avatar: AvatarTheme;
+  Badge: BadgeTheme;
+  Breadcrumbs: BreadcrumbsTheme;
+  Button: ButtonTheme;
+  ButtonGroup: ButtonGroupTheme;
+  Card: CardTheme;
+  Carousel: CarouselTheme;
+  CarouselSlide: CarouselSlideTheme;
+  Checkbox: CheckboxTheme;
+  Container: ContainerTheme;
+  Divider: DividerTheme;
+  Drawer: DrawerTheme;
+  Form: FormTheme;
+  FormGroup: FormGroupTheme;
+  Icon: IconTheme;
+  Image: ImageTheme;
+  Input: InputTheme;
+  InputFooter: InputFooterTheme;
+  Label: LabelTheme;
+  Link: LinkTheme;
+  Loader: LoaderTheme;
+  Menu: MenuTheme;
+  MenuItem: MenuItemTheme;
+  Modal: ModalTheme;
+  Notifications: NotificationsTheme;
+  Pagination: PaginationTheme;
+  PaginationItem: PaginationItemTheme;
+  Popover: PopoverTheme;
+  PopoverContainer: PopoverContainerTheme;
+  Progress: ProgressTheme;
+  Radio: RadioTheme;
+  Scroll: ScrollTheme;
+  Select: SelectTheme;
+  Skeleton: SkeletonTheme;
+  Slider: SliderTheme;
+  Stepper: StepperTheme;
+  Tab: TabTheme;
+  TabGroup: TabGroupTheme;
+  Table: TableTheme;
+  TableCell: TableCellTheme;
+  Tag: TagTheme;
+  Textarea: TextareaTheme;
+  Toggle: ToggleTheme;
+}
+
+export type UITheme = {
+  name?: string;
+  classPrefix?: string;
+  components?: ComponentThemes;
+  colors?: ColorLibrary;
+  styles?: string;
+  rtl?: boolean;
+}
+
+export function injectThemeStyles(name: string, styles: string) {
+  if (typeof window !== 'undefined') {
+    const el = document.querySelector('style[data-theme-style]')
+
+    if (el) {
+      el.setAttribute('data-theme-style', name)
+      el.textContent = styles
+    } else {
+      const themeStyle: HTMLStyleElement = document.createElement('style')
+
+      themeStyle.setAttribute('data-theme-style', name)
+      themeStyle.textContent = styles
+
+      document.head.appendChild(themeStyle)
+    }
+  }
+}

package/src/themes/base/components.ts

@@ -0,0 +1,46 @@
+export { default as Accordion } from '../../components/accordion/theme/Accordion.base.theme'
+export { default as AccordionItem } from '../../components/accordion/theme/AccordionItem.base.theme'
+export { default as Alert } from '../../components/alert/theme/Alert.base.theme'
+export { default as Avatar } from '../../components/avatar/theme/Avatar.base.theme'
+export { default as Badge } from '../../components/badge/theme/Badge.base.theme'
+export { default as Breadcrumbs } from '../../components/breadcrumbs/theme/Breadcrumbs.base.theme'
+export { default as Button } from '../../components/button/theme/Button.base.theme'
+export { default as ButtonGroup } from '../../components/button/theme/ButtonGroup.base.theme'
+export { default as Card } from '../../components/card/theme/Card.base.theme'
+export { default as Carousel } from '../../components/carousel/theme/Carousel.base.theme'
+export { default as CarouselSlide } from '../../components/carousel/theme/CarouselSlide.base.theme'
+export { default as Checkbox } from '../../components/checkbox/theme/Checkbox.base.theme'
+export { default as Container } from '../../components/container/theme/Container.base.theme'
+export { default as Divider } from '../../components/divider/theme/Divider.base.theme'
+export { default as Drawer } from '../../components/drawer/theme/Drawer.base.theme'
+export { default as Form } from '../../components/form/theme/Form.base.theme'
+export { default as FormGroup } from '../../components/formGroup/theme/FormGroup.base.theme'
+export { default as Icon } from '../../components/icon/theme/Icon.base.theme'
+export { default as Image } from '../../components/image/theme/Image.base.theme'
+export { default as Input } from '../../components/input/theme/Input.base.theme'
+export { default as InputFooter } from '../../components/inputFooter/theme/InputFooter.base.theme'
+export { default as Label } from '../../components/label/theme/Label.base.theme'
+export { default as Link } from '../../components/link/theme/Link.base.theme'
+export { default as Loader } from '../../components/loader/theme/Loader.base.theme'
+export { default as Menu } from '../../components/menu/theme/Menu.base.theme'
+export { default as MenuItem } from '../../components/menu/theme/MenuItem.base.theme'
+export { default as Modal } from '../../components/modal/theme/Modal.base.theme'
+export { default as Notifications } from '../../components/notifications/theme/Notifications.base.theme'
+export { default as Pagination } from '../../components/pagination/theme/Pagination.base.theme'
+export { default as PaginationItem } from '../../components/pagination/theme/PaginationItem.base.theme'
+export { default as Popover } from '../../components/popover/theme/Popover.base.theme'
+export { default as PopoverContainer } from '../../components/popover/theme/PopoverContainer.base.theme'
+export { default as Progress } from '../../components/progress/theme/Progress.base.theme'
+export { default as Radio } from '../../components/radio/theme/Radio.base.theme'
+export { default as Scroll } from '../../components/scroll/theme/Scroll.base.theme'
+export { default as Select } from '../../components/select/theme/Select.base.theme'
+export { default as Skeleton } from '../../components/skeleton/theme/Skeleton.base.theme'
+export { default as Slider } from '../../components/slider/theme/Slider.base.theme'
+export { default as Stepper } from '../../components/stepper/theme/Stepper.base.theme'
+export { default as Tab } from '../../components/tab/theme/Tab.base.theme'
+export { default as TabGroup } from '../../components/tab/theme/TabGroup.base.theme'
+export { default as Table } from '../../components/table/theme/Table.base.theme'
+export { default as TableCell } from '../../components/table/theme/TableCell.base.theme'
+export { default as Tag } from '../../components/tag/theme/Tag.base.theme'
+export { default as Textarea } from '../../components/textarea/theme/Textarea.base.theme'
+export { default as Toggle } from '../../components/toggle/theme/Toggle.base.theme'