@byyuurin/ui 0.0.0

package/dist/components/Input.vue

@@ -0,0 +1,169 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { InputHTMLAttributes } from 'vue'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { input } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type InputVariants = VariantProps<typeof input>
+
+export interface InputProps extends ComponentAttrs<typeof input>, UseComponentIconsProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: PrimitiveProps['as']
+  id?: string
+  name?: string
+  type?: InputHTMLAttributes['type']
+  placeholder?: string
+  size?: InputVariants['size']
+  variant?: InputVariants['variant']
+  loading?: boolean
+  highlight?: boolean
+  underline?: boolean
+  required?: boolean
+  autocomplete?: InputHTMLAttributes['autocomplete']
+  autofocus?: boolean
+  autofocusDelay?: number
+  disabled?: boolean
+}
+
+export interface InputEmits {
+  (e: 'update:modelValue', payload: string | number): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface InputSlots {
+  prefix?: (props?: {}) => any
+  default?: (props?: {}) => any
+  suffix?: (props?: {}) => any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed, onMounted, ref } from 'vue'
+import { useComponentIcons, useTheme } from '../composables'
+import { looseToNumber } from '../utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<InputProps>(), {
+  type: 'text',
+  size: 'md',
+  variant: 'outline',
+  autocomplete: 'off',
+  autofocusDelay: 0,
+})
+
+const emit = defineEmits<InputEmits>()
+const slots = defineSlots<InputSlots>()
+const [modelValue, modelModifiers] = defineModel<string | number>()
+
+const inputRef = ref<HTMLInputElement | null>(null)
+
+const { isPrefix, prefixIconName, isSuffix, suffixIconName } = useComponentIcons(props)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.input)
+  // @ts-expect-error ignore type
+  return styler({
+    ...props,
+    prefix: isPrefix.value || !!slots.prefix,
+    suffix: isSuffix.value || !!slots.suffix,
+  })
+})
+
+function autoFocus() {
+  if (props.autofocus)
+    inputRef.value?.focus()
+}
+
+function updateInput(value: string) {
+  if (modelModifiers.trim)
+    value = value.trim()
+
+  if (modelModifiers.number || props.type === 'number')
+    value = looseToNumber(value)
+
+  modelValue.value = value
+}
+
+function onInput(event: Event) {
+  if (!modelModifiers.lazy)
+    updateInput((event.target as HTMLInputElement).value)
+}
+
+function onChange(event: Event) {
+  const value = (event.target as HTMLInputElement).value
+
+  if (modelModifiers.lazy)
+    updateInput(value)
+
+  if (modelModifiers.trim)
+    (event.target as HTMLInputElement).value = value.trim()
+
+  emit('change', event)
+}
+
+function onBlur(event: FocusEvent) {
+  emit('blur', event)
+}
+
+defineExpose({
+  inputRef,
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+</script>
+
+<template>
+  <Primitive :as="as" :class="style.root({ class: [props.class, props.ui?.root] })" :aria-disabled="props.disabled ? true : undefined">
+    <span v-if="isPrefix || slots.prefix" :class="style.prefix({ class: props.ui?.prefix })">
+      <slot name="prefix">
+        <i
+          v-if="isPrefix && prefixIconName"
+          :class="style.prefixIcon({ class: [prefixIconName, props.ui?.prefixIcon] })"
+        ></i>
+      </slot>
+    </span>
+
+    <input
+      :id="id"
+      ref="inputRef"
+      :type="props.type"
+      :value="modelValue"
+      :name="props.name"
+      :placeholder="props.placeholder"
+      :class="style.base({ class: props.ui?.base })"
+      :disabled="props.disabled"
+      :required="props.required"
+      :autocomplete="props.autocomplete"
+      v-bind="$attrs"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+    />
+
+    <slot></slot>
+
+    <span v-if="isSuffix || slots.suffix" :class="style.suffix({ class: props.ui?.suffix })">
+      <slot name="suffix">
+        <i
+          v-if="isSuffix && suffixIconName"
+          :class="style.suffixIcon({ class: [suffixIconName, props.ui?.suffixIcon] })"
+        ></i>
+      </slot>
+    </span>
+  </Primitive>
+</template>

package/dist/components/Link.vue

@@ -0,0 +1,117 @@
+<script lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { link } from '../theme'
+import type { ComponentAttrs, HintString, MaybeArray } from '../types'
+
+export interface LinkProps extends Omit<ComponentAttrs<typeof link>, 'ui'> {
+  as?: PrimitiveProps['as']
+  type?: string
+  onClick?: MaybeArray<(e: MouseEvent) => void | Promise<void>>
+  label?: string
+  href?: string
+  navigate?: (e: MouseEvent) => void
+  /** A rel attribute value to apply on the link. */
+  rel?: HintString<'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc'> | null
+  noRel?: boolean
+  /** Where to display the linked URL, as the name for a browsing context. */
+  target?: HintString<'_blank' | '_parent' | '_self' | '_top'> | null
+  isExternal?: boolean
+  underline?: boolean
+  active?: boolean
+  disabled?: boolean
+  /** When `true`, only styles from `class`, `ui.active`, and `ui.inactive` will be applied. */
+  raw?: boolean
+  ui?: {
+    active?: string
+    inactive?: string
+    disabled?: string
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables'
+
+const props = withDefaults(defineProps<LinkProps>(), {
+  as: 'button',
+  type: 'button',
+})
+
+const linkProps = computed(() => {
+  const { as, type, disabled, href, rel, target } = props
+  const base = { as, rel, target }
+
+  if (href) {
+    return {
+      ...base,
+      'as': 'a',
+      'href': disabled ? undefined : href,
+      'aria-disabled': disabled ? 'true' : undefined,
+      'role': disabled ? 'link' : undefined,
+      'tabindex': disabled ? -1 : undefined,
+    }
+  }
+
+  if (as === 'button')
+    return { ...base, type, disabled }
+
+  return base
+})
+
+const { theme, createStyler } = useTheme()
+
+const style = computed(() => {
+  if (props.raw)
+    return props.class
+
+  const { link } = theme.value
+
+  const styler = createStyler({
+    ...link,
+    variants: {
+      ...link.variants,
+      active: {
+        true: [link.variants.active.true, props.ui?.active],
+        false: [link.variants.active.false, props.ui?.inactive],
+      },
+      disabled: {
+        true: [link.variants.disabled.true, props.ui?.disabled],
+      },
+    },
+  })
+  return styler(props)
+})
+
+function handleClick(e: MouseEvent) {
+  if (props.disabled) {
+    e.stopPropagation()
+    e.preventDefault()
+    return
+  }
+
+  if (props.onClick) {
+    const handlers = Array.isArray(props.onClick) ? props.onClick : [props.onClick]
+    for (const handler of handlers)
+      handler(e)
+  }
+
+  if (props.href && props.navigate && !props.isExternal)
+    props.navigate(e)
+}
+</script>
+
+<template>
+  <Primitive
+    v-bind="linkProps"
+    :rel="props.rel"
+    :target="props.target"
+    :class="style"
+    @click="handleClick"
+  >
+    <slot :active="props.active">
+      {{ props.label }}
+    </slot>
+  </Primitive>
+</template>

package/dist/components/Modal.vue

@@ -0,0 +1,145 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { DialogContentProps, DialogRootEmits, DialogRootProps } from 'reka-ui'
+import type { modal } from '../theme'
+import type { ButtonProps, ComponentAttrs } from '../types'
+
+export interface ModalEmits extends DialogRootEmits {}
+
+export interface ModalSlots {
+  default?: (props: { open: boolean }) => any
+  content?: (props?: any) => any
+  header?: (props?: any) => any
+  title?: (props?: any) => any
+  description?: (props?: any) => any
+  close?: (props?: any) => any
+  body?: (props?: any) => any
+  footer?: (props?: any) => any
+}
+
+type ModalVariants = VariantProps<typeof modal>
+
+export interface ModalProps extends ComponentAttrs<typeof modal>, DialogRootProps {
+  title?: string
+  description?: string
+  size?: ModalVariants['size']
+  content?: Omit<DialogContentProps, 'as' | 'asChild' | 'forceMount'>
+  /** @default true */
+  portal?: boolean
+  /** @default true */
+  overlay?: boolean
+  blur?: boolean
+  /** @default true */
+  transition?: boolean
+  /**
+   * When `false`, the modal will not close when clicking outside or pressing escape.
+   * @default true
+   */
+  dismissible?: boolean
+  close?: ButtonProps | boolean
+  /** @default `app.icons.close` */
+  closeIcon?: string
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, useForwardPropsEmits } from 'reka-ui'
+import { computed, toRef } from 'vue'
+import { useTheme } from '../composables'
+import UButton from './Button.vue'
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  modal: true,
+  size: 'md',
+  portal: true,
+  overlay: true,
+  transition: true,
+  dismissible: true,
+  close: true,
+})
+const emit = defineEmits<ModalEmits>()
+const slots = defineSlots<ModalSlots>()
+const rootProps = useForwardPropsEmits(reactivePick(props, 'open', 'defaultOpen', 'modal'), emit)
+const contentProps = toRef(() => props.content)
+const contentEvents = computed(() => {
+  if (props.dismissible)
+    return {}
+
+  return {
+    pointerDownOutside: (e: Event) => e.preventDefault(),
+    interactOutside: (e: Event) => e.preventDefault(),
+    escapeKeyDown: (e: Event) => e.preventDefault(),
+  }
+})
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.modal)
+  return styler(props)
+})
+</script>
+
+<template>
+  <DialogRoot v-slot="{ open }" v-bind="rootProps">
+    <DialogTrigger
+      v-if="slots.default"
+      :class="props.class"
+      as-child
+    >
+      <slot :open="open"></slot>
+    </DialogTrigger>
+    <DialogPortal :disabled="!props.portal">
+      <DialogOverlay v-if="props.overlay" :class="style.overlay({ class: props.ui?.overlay })" />
+
+      <DialogContent :class="style.content({ class: props.ui?.content })" v-bind="contentProps" v-on="contentEvents">
+        <slot name="content">
+          <div
+            v-if="slots.header || (props.title || slots.title) || (props.description || slots.description) || (props.close || slots.close)"
+            :class="style.header({ class: props.ui?.header })"
+          >
+            <slot name="header">
+              <DialogTitle
+                v-if="props.title || slots.title"
+                :class="style.title({ class: props.ui?.title })"
+              >
+                <slot name="title">
+                  {{ props.title }}
+                </slot>
+              </DialogTitle>
+
+              <DialogClose as-child>
+                <slot name="close">
+                  <UButton
+                    v-if="props.close"
+                    variant="ghost"
+                    :icon="props.closeIcon || theme.app.icons.close"
+                    v-bind="typeof props.close === 'boolean' ? {} : props.close"
+                    :class="style.close({ class: props.ui?.close })"
+                  />
+                </slot>
+              </DialogClose>
+
+              <DialogDescription
+                v-if="props.description || slots.description"
+                :class="style.description({ class: props.ui?.description })"
+              >
+                <slot name="description">
+                  {{ props.description }}
+                </slot>
+              </DialogDescription>
+            </slot>
+          </div>
+
+          <div v-if="slots.body" :class="style.body({ class: props.ui?.body })">
+            <slot name="body"></slot>
+          </div>
+
+          <div v-if="slots.footer" :class="style.footer({ class: props.ui?.footer })">
+            <slot name="footer"></slot>
+          </div>
+        </slot>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+</template>

package/dist/components/ModalProvider.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { injectModalState, useModal } from '../composables/useModal'
+
+const modalState = injectModalState()
+const { isOpen } = useModal()
+</script>
+
+<template>
+  <component :is="modalState.component" v-if="modalState?.props.open" v-bind="modalState.props" v-model:open="isOpen" />
+</template>

package/dist/components/Popover.vue

@@ -0,0 +1,97 @@
+<script lang="ts">
+import type { HoverCardRootProps, PopoverArrowProps, PopoverContentProps, PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import type { popover } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+export interface PopoverProps extends ComponentAttrs<typeof popover>, PopoverRootProps, Pick<HoverCardRootProps, 'openDelay' | 'closeDelay'> {
+  /**
+   * The display mode of the popover.
+   * @default "click"
+   */
+  mode?: 'click' | 'hover'
+  /** @default { side: 'bottom', sideOffset: 8, collisionPadding: 8 } */
+  content?: Omit<PopoverContentProps, 'as' | 'asChild' | 'forceMount'>
+  arrow?: boolean | Omit<PopoverArrowProps, 'as' | 'asChild'>
+  /** @default true */
+  portal?: boolean
+  /**
+   * When `false`, the popover will not close when clicking outside or pressing escape.
+   * @default true
+   */
+  dismissible?: boolean
+}
+
+export interface PopoverEmits extends PopoverRootEmits {}
+
+export interface PopoverSlots {
+  default?: (props: { open: boolean }) => any
+  content?: (props?: {}) => any
+}
+</script>
+
+<script setup lang="ts">
+import { reactivePick } from '@vueuse/core'
+import { defu } from 'defu'
+import { useForwardPropsEmits } from 'reka-ui'
+import { HoverCard, Popover } from 'reka-ui/namespaced'
+import { computed, toRef } from 'vue'
+import { useTheme } from '../composables'
+
+const props = withDefaults(defineProps<PopoverProps>(), {
+  mode: 'click',
+  portal: true,
+  openDelay: 0,
+  closeDelay: 0,
+  dismissible: true,
+})
+const emit = defineEmits<PopoverEmits>()
+const slots = defineSlots<PopoverSlots>()
+
+const pick = props.mode === 'hover'
+  ? reactivePick(props, 'defaultOpen', 'open', 'openDelay', 'closeDelay')
+  : reactivePick(props, 'defaultOpen', 'open', 'modal')
+
+const rootProps = useForwardPropsEmits(pick, emit)
+const contentProps = toRef(() => defu(props.content, { side: 'bottom', sideOffset: 8, collisionPadding: 8 }) as PopoverContentProps)
+
+const contentEvents = computed(() => {
+  if (props.dismissible)
+    return {}
+
+  return {
+    pointerDownOutside: (e: Event) => e.preventDefault(),
+    interactOutside: (e: Event) => e.preventDefault(),
+    escapeKeyDown: (e: Event) => e.preventDefault(),
+  }
+})
+
+const arrowProps = toRef(() => props.arrow as PopoverArrowProps)
+
+const Component = computed(() => props.mode === 'hover' ? HoverCard : Popover)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.popover)
+  return styler(props)
+})
+</script>
+
+<template>
+  <Component.Root v-slot="{ open }" v-bind="rootProps">
+    <Component.Trigger v-if="!!slots.default" as-child :class="props.class">
+      <slot :open="open"></slot>
+    </Component.Trigger>
+
+    <Component.Portal :disabled="!portal">
+      <Component.Content
+        v-bind="contentProps"
+        :class="style.content({ class: [!slots.default && props.class, props.ui?.content] })"
+        v-on="contentEvents"
+      >
+        <slot name="content"></slot>
+
+        <Component.Arrow v-if="!!arrow" v-bind="arrowProps" :class="style.arrow({ class: props.ui?.arrow })" />
+      </Component.Content>
+    </Component.Portal>
+  </Component.Root>
+</template>