@byyuurin/ui 0.0.2 → 0.0.4

package/dist/{components → runtime/components}/Switch.vue

@@ -1,99 +1,98 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps, SwitchRootProps } from 'reka-ui'
-import type { switch as _switch } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-type SwitchVariants = VariantProps<typeof _switch>
-
-export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
-  as?: PrimitiveProps['as']
-  size?: SwitchVariants['size']
-  /** When `true`, the loading icon will be displayed. */
-  loading?: boolean
-  /**
-   * The icon when the `loading` prop is `true`.
-   * @default app.icons.loading
-   */
-  loadingIcon?: string
-  /** Display an icon when the switch is checked. */
-  checkedIcon?: string
-  /** Display an icon when the switch is unchecked. */
-  uncheckedIcon?: string
-  label?: string
-  description?: string
-  round?: boolean
-}
-
-export interface SwitchEmits {
-  (event: 'change', payload: Event): void
-}
-
-export interface SwitchSlots {
-  label?: (props: { label?: string }) => any
-  description?: (props: { description?: string }) => any
-}
-</script>
-
-<script lang="ts" setup>
-import { reactivePick } from '@vueuse/core'
-import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from 'reka-ui'
-import { computed, useId } from 'vue'
-import { useTheme } from '../composables'
-
-const props = withDefaults(defineProps<SwitchProps>(), {
-  size: 'md',
-})
-const emit = defineEmits<SwitchEmits>()
-const slots = defineSlots<SwitchSlots>()
-const modelValue = defineModel<boolean>({ default: undefined })
-
-const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
-const id = useId()
-
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.switch)
-  return styler({ ...props, checked: false, unchecked: false })
-})
-
-function onUpdate(value: any) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: { value } })
-  emit('change', event)
-}
-</script>
-
-<template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <div :class="style.container({ class: props.ui?.container })">
-      <SwitchRoot
-        :id="id"
-        v-bind="rootProps"
-        v-model="modelValue"
-        :name="props.name"
-        :disabled="props.disabled || props.loading"
-        :class="style.base({ class: props.ui?.base })"
-        @update:model-value="onUpdate"
-      >
-        <SwitchThumb :class="style.thumb({ class: props.ui?.thumb })">
-          <i v-if="props.loading" :class="style.icon({ class: [theme.app.icons.loading, props.ui?.icon], checked: true, unchecked: true })"></i>
-          <template v-else>
-            <i v-if="props.checkedIcon" :class="style.icon({ class: [props.checkedIcon, props.ui?.icon], checked: true })"></i>
-            <i v-if="props.uncheckedIcon" :class="style.icon({ class: [props.uncheckedIcon, props.ui?.icon], unchecked: true })"></i>
-          </template>
-        </SwitchThumb>
-      </SwitchRoot>
-    </div>
-    <div v-if="props.label || slots.label || props.description || slots.description" :class="style.wrapper({ class: props.ui?.wrapper })">
-      <Label v-if="props.label || slots.label" :for="id" :class="style.label({ class: props.ui?.label })">
-        <slot name="label" :label="props.label">{{ props.label }}</slot>
-      </Label>
-      <p v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })">
-        <slot name="description" :description="props.description">
-          {{ props.description }}
-        </slot>
-      </p>
-    </div>
-  </Primitive>
-</template>
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps, SwitchRootProps } from 'reka-ui'
+import type { switch as _switch } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type SwitchVariants = VariantProps<typeof _switch>
+
+export interface SwitchProps extends ComponentAttrs<typeof _switch>, Pick<SwitchRootProps, 'disabled' | 'id' | 'name' | 'required' | 'value' | 'defaultValue'> {
+  as?: PrimitiveProps['as']
+  size?: SwitchVariants['size']
+  /** When `true`, the loading icon will be displayed. */
+  loading?: boolean
+  /**
+   * The icon when the `loading` prop is `true`.
+   * @default app.icons.loading
+   */
+  loadingIcon?: string
+  /** Display an icon when the switch is checked. */
+  checkedIcon?: string
+  /** Display an icon when the switch is unchecked. */
+  uncheckedIcon?: string
+  label?: string
+  description?: string
+}
+
+export interface SwitchEmits {
+  (event: 'change', payload: Event): void
+}
+
+export interface SwitchSlots {
+  label?: (props: { label?: string }) => any
+  description?: (props: { description?: string }) => any
+}
+</script>
+
+<script lang="ts" setup>
+import { reactivePick } from '@vueuse/core'
+import { Label, Primitive, SwitchRoot, SwitchThumb, useForwardProps } from 'reka-ui'
+import { computed, useId } from 'vue'
+import { useTheme } from '../composables'
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  size: 'md',
+})
+const emit = defineEmits<SwitchEmits>()
+const slots = defineSlots<SwitchSlots>()
+const modelValue = defineModel<boolean>({ default: undefined })
+
+const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
+const id = useId()
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.switch)
+  return styler({ ...props, checked: false, unchecked: false })
+})
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emit('change', event)
+}
+</script>
+
+<template>
+  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <div :class="style.container({ class: props.ui?.container })">
+      <SwitchRoot
+        :id="id"
+        v-bind="rootProps"
+        v-model="modelValue"
+        :name="props.name"
+        :disabled="props.disabled || props.loading"
+        :class="style.base({ class: props.ui?.base })"
+        @update:model-value="onUpdate"
+      >
+        <SwitchThumb :class="style.thumb({ class: props.ui?.thumb })">
+          <i v-if="props.loading" :class="style.icon({ class: [theme.app.icons.loading, props.ui?.icon], checked: true, unchecked: true })"></i>
+          <template v-else>
+            <i v-if="props.checkedIcon" :class="style.icon({ class: [props.checkedIcon, props.ui?.icon], checked: true })"></i>
+            <i v-if="props.uncheckedIcon" :class="style.icon({ class: [props.uncheckedIcon, props.ui?.icon], unchecked: true })"></i>
+          </template>
+        </SwitchThumb>
+      </SwitchRoot>
+    </div>
+    <div v-if="props.label || slots.label || props.description || slots.description" :class="style.wrapper({ class: props.ui?.wrapper })">
+      <Label v-if="props.label || slots.label" :for="id" :class="style.label({ class: props.ui?.label })">
+        <slot name="label" :label="props.label">{{ props.label }}</slot>
+      </Label>
+      <p v-if="props.description || slots.description" :class="style.description({ class: props.ui?.description })">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+  </Primitive>
+</template>

package/dist/{components → runtime/components}/Tabs.vue

@@ -1,117 +1,117 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps, TabsRootEmits, TabsRootProps } from 'reka-ui'
-import type { tabs } from '../theme'
-import type { ComponentAttrs, DynamicSlots } from '../types'
-
-export interface TabsItem {
-  label?: string
-  icon?: string
-  slot?: string
-  content?: string
-  /** A unique value for the tab item. Defaults to the index. */
-  value?: string | number
-  disabled?: boolean
-}
-
-type TabsVariants = VariantProps<typeof tabs>
-
-export interface TabsProps<T> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
-  as?: PrimitiveProps['as']
-  items?: T[]
-  variant?: TabsVariants['variant']
-  orientation?: TabsVariants['orientation']
-  size?: TabsVariants['size']
-  /** @default true */
-  full?: boolean
-  /**
-   * The content of the tabs, can be disabled to prevent rendering the content.
-   * @default true
-   */
-  content?: boolean
-  /**
-   * The key used to get the label from the item.
-   * @default 'label'
-   */
-  labelKey?: string
-}
-
-export interface TabsEmits extends TabsRootEmits<string | number> {}
-
-type SlotProps<T> = (props: { item: T, index: number }) => any
-
-export type TabsSlots<T extends { slot?: string }> = {
-  leading?: SlotProps<T>
-  default?: SlotProps<T>
-  trailing?: SlotProps<T>
-  content?: SlotProps<T>
-} & DynamicSlots<T, SlotProps<T>>
-</script>
-
-<script lang="ts" setup generic="T extends TabsItem">
-import { reactivePick } from '@vueuse/core'
-import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, useForwardPropsEmits } from 'reka-ui'
-import { computed } from 'vue'
-import { useTheme } from '../composables'
-import { get } from '../utils'
-
-const props = withDefaults(defineProps<TabsProps<T>>(), {
-  defaultValue: '0',
-  variant: 'solid',
-  orientation: 'horizontal',
-  size: 'md',
-  full: true,
-  content: true,
-  labelKey: 'label',
-})
-
-const emits = defineEmits<TabsEmits>()
-const slots = defineSlots<TabsSlots<T>>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emits)
-
-const { theme, createStyler } = useTheme()
-const style = computed(() => {
-  const styler = createStyler(theme.value.tabs)
-  return styler(props)
-})
-</script>
-
-<template>
-  <TabsRoot v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <TabsList :class="style.list({ class: props.ui?.list })">
-      <TabsIndicator :class="style.indicator({ class: props.ui?.indicator })" />
-
-      <TabsTrigger
-        v-for="(item, index) of items"
-        :key="index"
-        :value="item.value || String(index)"
-        :disabled="item.disabled"
-        :class="style.trigger({ class: props.ui?.trigger })"
-      >
-        <slot name="leading" :item="item" :index="index">
-          <i v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })"></i>
-        </slot>
-
-        <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
-          <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
-        </span>
-
-        <slot name="trailing" :item="item" :index="index"></slot>
-      </TabsTrigger>
-    </TabsList>
-
-    <template v-if="props.content">
-      <TabsContent
-        v-for="(item, index) of items"
-        :key="index"
-        :value="item.value || String(index)"
-        :class="style.content({ class: props.ui?.content })"
-      >
-        <slot :name="item.slot || 'content'" :item="item" :index="index">
-          {{ item.content }}
-        </slot>
-      </TabsContent>
-    </template>
-  </TabsRoot>
-</template>
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps, TabsRootEmits, TabsRootProps } from 'reka-ui'
+import type { tabs } from '../theme'
+import type { ComponentAttrs, DynamicSlots } from '../types'
+
+export interface TabsItem {
+  label?: string
+  icon?: string
+  slot?: string
+  content?: string
+  /** A unique value for the tab item. Defaults to the index. */
+  value?: string | number
+  disabled?: boolean
+}
+
+type TabsVariants = VariantProps<typeof tabs>
+
+export interface TabsProps<T> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
+  as?: PrimitiveProps['as']
+  items?: T[]
+  variant?: TabsVariants['variant']
+  orientation?: TabsVariants['orientation']
+  size?: TabsVariants['size']
+  /** @default true */
+  full?: boolean
+  /**
+   * The content of the tabs, can be disabled to prevent rendering the content.
+   * @default true
+   */
+  content?: boolean
+  /**
+   * The key used to get the label from the item.
+   * @default 'label'
+   */
+  labelKey?: string
+}
+
+export interface TabsEmits extends TabsRootEmits<string | number> {}
+
+type SlotProps<T> = (props: { item: T, index: number }) => any
+
+export type TabsSlots<T extends { slot?: string }> = {
+  prefix?: SlotProps<T>
+  default?: SlotProps<T>
+  suffix?: SlotProps<T>
+  content?: SlotProps<T>
+} & DynamicSlots<T, SlotProps<T>>
+</script>
+
+<script lang="ts" setup generic="T extends TabsItem">
+import { reactivePick } from '@vueuse/core'
+import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { useTheme } from '../composables'
+import { get } from '../utils'
+
+const props = withDefaults(defineProps<TabsProps<T>>(), {
+  defaultValue: '0',
+  variant: 'solid',
+  orientation: 'horizontal',
+  size: 'md',
+  full: true,
+  content: true,
+  labelKey: 'label',
+})
+
+const emits = defineEmits<TabsEmits>()
+const slots = defineSlots<TabsSlots<T>>()
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emits)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.tabs)
+  return styler(props)
+})
+</script>
+
+<template>
+  <TabsRoot v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })">
+    <TabsList :class="style.list({ class: props.ui?.list })">
+      <TabsIndicator :class="style.indicator({ class: props.ui?.indicator })" />
+
+      <TabsTrigger
+        v-for="(item, index) of items"
+        :key="index"
+        :value="item.value || String(index)"
+        :disabled="item.disabled"
+        :class="style.trigger({ class: props.ui?.trigger })"
+      >
+        <slot name="prefix" :item="item" :index="index">
+          <i v-if="item.icon" :class="style.prefixIcon({ class: [item.icon, props.ui?.prefixIcon] })"></i>
+        </slot>
+
+        <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
+          <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
+        </span>
+
+        <slot name="suffix" :item="item" :index="index"></slot>
+      </TabsTrigger>
+    </TabsList>
+
+    <template v-if="props.content">
+      <TabsContent
+        v-for="(item, index) of items"
+        :key="index"
+        :value="item.value || String(index)"
+        :class="style.content({ class: props.ui?.content })"
+      >
+        <slot :name="item.slot || 'content'" :item="item" :index="index">
+          {{ item.content }}
+        </slot>
+      </TabsContent>
+    </template>
+  </TabsRoot>
+</template>

package/dist/runtime/components/Textarea.vue

@@ -0,0 +1,173 @@
+<script lang="ts">
+import type { VariantProps } from '@byyuurin/ui-kit'
+import type { PrimitiveProps } from 'reka-ui'
+import type { textarea } from '../theme'
+import type { ComponentAttrs } from '../types'
+
+type TextareaVariants = VariantProps<typeof textarea>
+
+export interface TextareaProps extends ComponentAttrs<typeof textarea> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: PrimitiveProps['as']
+  id?: string
+  name?: string
+  placeholder?: string
+  size?: TextareaVariants['size']
+  variant?: TextareaVariants['variant']
+  highlight?: boolean
+  underline?: boolean
+  required?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
+  disabled?: boolean
+  rows?: number
+  maxRows?: number
+  autoResize?: boolean
+}
+
+export interface TextareaEmits {
+  (e: 'update:modelValue', payload: string): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface TextareaSlots {
+  default?: (props?: {}) => any
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from 'reka-ui'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { useTheme } from '../composables'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TextareaProps>(), {
+  size: 'md',
+  variant: 'outline',
+  rows: 3,
+  maxRows: 0,
+  autofocusDelay: 0,
+})
+
+const emit = defineEmits<TextareaEmits>()
+defineSlots<TextareaSlots>()
+const [modelValue, modelModifiers] = defineModel<string | number>()
+
+const textareaRef = ref<HTMLTextAreaElement | null>(null)
+
+const { theme, createStyler } = useTheme()
+const style = computed(() => {
+  const styler = createStyler(theme.value.textarea)
+  return styler(props)
+})
+
+function autoFocus() {
+  if (props.autofocus)
+    textareaRef.value?.focus()
+}
+
+function updateInput(value: string) {
+  if (modelModifiers.trim)
+    value = value.trim()
+
+  modelValue.value = value
+}
+
+function onInput(event: Event) {
+  autoResize()
+
+  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)
+}
+
+function autoResize() {
+  if (!props.autoResize)
+    return
+
+  if (!textareaRef.value)
+    return
+
+  textareaRef.value.rows = props.rows
+
+  const overflow = textareaRef.value.style.overflow
+  textareaRef.value.style.overflow = 'hidden'
+
+  const styles = window.getComputedStyle(textareaRef.value)
+  const paddingTop = Number.parseInt(styles.paddingTop)
+  const paddingBottom = Number.parseInt(styles.paddingBottom)
+  const padding = paddingTop + paddingBottom
+  const lineHeight = Number.parseInt(styles.lineHeight)
+  const { scrollHeight } = textareaRef.value
+  const newRows = Math.ceil((scrollHeight - padding) / lineHeight)
+
+  if (newRows > props.rows)
+    textareaRef.value.rows = props.maxRows ? Math.min(newRows, props.maxRows) : newRows
+
+  textareaRef.value.style.overflow = overflow
+}
+
+watch(modelValue, () => {
+  nextTick(autoResize)
+})
+
+defineExpose({
+  textareaRef,
+})
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :class="style.root({ class: [props.class, props.ui?.root] })"
+    :aria-disabled="props.disabled ? true : undefined"
+  >
+    <textarea
+      :id="props.id"
+      ref="textareaRef"
+      :value="modelValue"
+      :name="props.name"
+      :rows="props.rows"
+      :placeholder="props.placeholder"
+      :class="style.base({ class: props.ui?.base })"
+      :disabled="props.disabled"
+      :required="props.required"
+      v-bind="$attrs"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="autoResize"
+    >
+    </textarea>
+
+    <slot></slot>
+  </Primitive>
+</template>

package/dist/{components → runtime/components}/Toast.vue

@@ -121,6 +121,6 @@ defineExpose({
       </ToastClose>
     </div>
 
-    <div v-if="remaining > 0 && duration" :class="style.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }"></div>
+    <div v-if="remaining >= 0 && duration" :class="style.progress({ class: props.ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }"></div>
   </ToastRoot>
 </template>

package/dist/{components → runtime/components}/Toaster.vue

@@ -139,5 +139,39 @@ function getOffset(index: number) {
 </template>
 
 <style>
-@keyframes toast-collapsed-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--before) - var(--height))*var(--gap))) scale(var(--scale))}}@keyframes toast-closed{0%{transform:var(--transform)}to{transform:translateY(calc((var(--offset) - var(--height))*var(--translate-factor)))}}@keyframes toast-slide-left{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(-100%) translateY(var(--translate))}}@keyframes toast-slide-right{0%{transform:translateX(0) translateY(var(--translate))}to{transform:translateX(100%) translateY(var(--translate))}}
+@keyframes toast-collapsed-closed {
+  from {
+    transform: var(--transform);
+  }
+  to {
+    transform: translateY(calc((var(--before) - var(--height)) * var(--gap)))
+      scale(var(--scale));
+  }
+}
+@keyframes toast-closed {
+  from {
+    transform: var(--transform);
+  }
+  to {
+    transform: translateY(
+      calc((var(--offset) - var(--height)) * var(--translate-factor))
+    );
+  }
+}
+@keyframes toast-slide-left {
+  from {
+    transform: translateX(0) translateY(var(--translate));
+  }
+  to {
+    transform: translateX(-100%) translateY(var(--translate));
+  }
+}
+@keyframes toast-slide-right {
+  from {
+    transform: translateX(0) translateY(var(--translate));
+  }
+  to {
+    transform: translateX(100%) translateY(var(--translate));
+  }
+}
 </style>