@byyuurin/ui 0.0.9 → 0.0.11

package/dist/runtime/components/Tabs.vue

@@ -1,86 +1,40 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
-import type { tabs } from '../theme'
-import type { ComponentAttrs, DynamicSlots } from '../types'
+<script>
 
-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>>
-
-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'> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: TabsRootProps<string | number>['as']
-  items?: T[]
-  variant?: TabsVariants['variant']
-  orientation?: TabsVariants['orientation']
-  size?: TabsVariants['size']
-  /** @default true */
-  evenly?: 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
-}
 </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/useTheme'
-import { get } from '../utils'
-
-const props = withDefaults(defineProps<TabsProps<T>>(), {
-  defaultValue: '0',
-  variant: 'solid',
-  orientation: 'horizontal',
-  evenly: true,
-  content: true,
-  labelKey: 'label',
-})
-
-const emit = defineEmits<TabsEmits>()
-const slots = defineSlots<TabsSlots<T>>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'activationMode', 'unmountOnHide'), emit)
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('tabs', props))
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger, useForwardPropsEmits } from "reka-ui";
+import { computed } from "vue";
+import { useTheme } from "../composables/useTheme";
+import { get } from "../utils";
+const props = defineProps({
+  as: { type: null, required: false },
+  items: { type: Array, required: false },
+  variant: { type: null, required: false, default: "solid" },
+  orientation: { type: null, required: false, default: "horizontal" },
+  size: { type: null, required: false },
+  evenly: { type: Boolean, required: false, default: true },
+  content: { type: Boolean, required: false, default: true },
+  labelKey: { type: String, required: false, default: "label" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultValue: { type: [String, Number], required: false, default: "0" },
+  modelValue: { type: [String, Number], required: false },
+  activationMode: { type: String, required: false },
+  unmountOnHide: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "activationMode", "unmountOnHide"), emit);
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("tabs", 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 })" />
+  <TabsRoot v-bind="rootProps" :class="style.root({ class: [props.class, props.ui?.root] })" data-part="root">
+    <TabsList :class="style.list({ class: props.ui?.list })" data-part="list">
+      <TabsIndicator :class="style.indicator({ class: props.ui?.indicator })" data-part="indicator" />
 
       <TabsTrigger
         v-for="(item, index) of items"
@@ -88,12 +42,13 @@ const style = computed(() => generateStyle('tabs', props))
         :value="item.value || String(index)"
         :disabled="item.disabled"
         :class="style.trigger({ class: props.ui?.trigger })"
+        data-part="trigger"
       >
         <slot name="leading" :item="item" :index="index">
-          <span v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })"></span>
+          <span v-if="item.icon" :class="style.leadingIcon({ class: [item.icon, props.ui?.leadingIcon] })" data-part="leading-icon"></span>
         </slot>
 
-        <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })">
+        <span v-if="get(item, props.labelKey) || slots.default" :class="style.label({ class: props.ui?.label })" data-part="label">
           <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
         </span>
 
@@ -107,6 +62,7 @@ const style = computed(() => generateStyle('tabs', props))
         :key="index"
         :value="item.value || String(index)"
         :class="style.content({ class: props.ui?.content })"
+        data-part="content"
       >
         <slot :name="item.slot || 'content'" :item="item" :index="index">
           {{ item.content }}

package/dist/runtime/components/Tabs.vue.d.ts

@@ -0,0 +1,65 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+import type { tabs } from '../theme/index.js';
+import type { ComponentAttrs, DynamicSlots } from '../types/index.js';
+export interface TabsEmits extends TabsRootEmits<string | number> {
+}
+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;
+    [key: string]: any;
+}
+type SlotProps<T extends TabsItem> = (props: {
+    item: T;
+    index: number;
+}) => any;
+export type TabsSlots<T extends TabsItem = TabsItem> = {
+    leading?: SlotProps<T>;
+    default?: SlotProps<T>;
+    trailing?: SlotProps<T>;
+    content?: SlotProps<T>;
+} & DynamicSlots<T, undefined, SlotProps<T>>;
+type TabsVariants = VariantProps<typeof tabs>;
+export interface TabsProps<T extends TabsItem = TabsItem> extends ComponentAttrs<typeof tabs>, Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: TabsRootProps<string | number>['as'];
+    items?: T[];
+    variant?: TabsVariants['variant'];
+    orientation?: TabsVariants['orientation'];
+    size?: TabsVariants['size'];
+    /** @default true */
+    evenly?: 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;
+}
+declare const _default: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & TabsProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: TabsSlots<T>;
+    emit: (evt: "update:modelValue", payload: string | number) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Textarea.vue

@@ -1,166 +1,125 @@
-<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'
+<script>
 
-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
-}
-
-type TextareaVariants = VariantProps<typeof textarea>
-
-export interface TextareaProps extends ComponentAttrs<typeof textarea> {
-  /**
-   * The element or component this component should render as.
-   * @default "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
-}
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
+<script setup>
+import { Primitive } from "reka-ui";
+import { computed, nextTick, onMounted, useTemplateRef, watch } from "vue";
+import { useFormItem } from "../composables/useFormItem";
+import { useTheme } from "../composables/useTheme";
 defineOptions({
-  inheritAttrs: false,
-})
-
-const props = withDefaults(defineProps<TextareaProps>(), {
-  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 { generateStyle } = useTheme()
-const style = computed(() => generateStyle('textarea', props))
-
+  inheritAttrs: false
+});
+const props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  size: { type: null, required: false },
+  variant: { type: null, required: false, default: "outline" },
+  highlight: { type: Boolean, required: false },
+  underline: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  disabled: { type: Boolean, required: false },
+  rows: { type: Number, required: false, default: 3 },
+  maxRows: { type: Number, required: false, default: 0 },
+  autoResize: { type: Boolean, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["update:modelValue", "blur", "change"]);
+defineSlots();
+const [modelValue, modelModifiers] = defineModel({ type: [String, Number] });
+const textareaRef = useTemplateRef("textareaRef");
+const { id, name, size, highlight, disabled, ariaAttrs, emitFormInput, emitFormChange, emitFormBlur, emitFormFocus } = useFormItem(props);
+const { generateStyle } = useTheme();
+const style = computed(() => generateStyle("textarea", {
+  ...props,
+  size: size.value,
+  highlight: highlight.value
+}));
 function autoFocus() {
   if (props.autofocus)
-    textareaRef.value?.focus()
+    textareaRef.value?.focus();
 }
-
-function updateInput(value: string) {
+function updateInput(value) {
   if (modelModifiers.trim)
-    value = value.trim()
-
-  modelValue.value = value
+    value = value.trim();
+  modelValue.value = value;
+  emitFormInput();
 }
-
-function onInput(event: Event) {
-  autoResize()
-
+function onInput(event) {
+  autoResize();
   if (!modelModifiers.lazy)
-    updateInput((event.target as HTMLInputElement).value)
+    updateInput(event.target.value);
 }
-
-function onChange(event: Event) {
-  const value = (event.target as HTMLInputElement).value
-
+function onChange(event) {
+  const value = event.target.value;
   if (modelModifiers.lazy)
-    updateInput(value)
-
+    updateInput(value);
   if (modelModifiers.trim)
-    (event.target as HTMLInputElement).value = value.trim()
-
-  emit('change', event)
+    event.target.value = value.trim();
+  emit("change", event);
+  emitFormChange();
 }
-
-function onBlur(event: FocusEvent) {
-  emit('blur', event)
+function onBlur(event) {
+  emit("blur", event);
+  emitFormBlur();
 }
-
 function autoResize() {
   if (!props.autoResize)
-    return
-
+    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)
-
+    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
+    textareaRef.value.rows = props.maxRows ? Math.min(newRows, props.maxRows) : newRows;
+  textareaRef.value.style.overflow = overflow;
 }
-
 watch(modelValue, () => {
-  nextTick(autoResize)
-})
-
+  nextTick(autoResize);
+});
 defineExpose({
-  textareaRef,
-})
-
+  textareaRef
+});
 onMounted(() => {
   setTimeout(() => {
-    autoFocus()
-  }, props.autofocusDelay)
-})
+    autoFocus();
+  }, props.autofocusDelay);
+});
 </script>
 
 <template>
   <Primitive
     :as="props.as"
+    :aria-disabled="disabled ? true : void 0"
     :class="style.root({ class: [props.class, props.ui?.root] })"
-    :aria-disabled="props.disabled ? true : undefined"
+    :data-part="$attrs['data-part'] ?? 'root'"
   >
     <textarea
-      :id="props.id"
       ref="textareaRef"
+      :class="style.base({ class: props.ui?.base })"
+      data-part="base"
       :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"
+      v-bind="{ ...$attrs, ...ariaAttrs, id, name, disabled }"
       @input="onInput"
       @blur="onBlur"
       @change="onChange"
-      @focus="autoResize"
+      @focus="emitFormFocus"
     ></textarea>
 
     <slot></slot>

package/dist/runtime/components/Textarea.vue.d.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import type { textarea } from '../theme/index.js';
+import type { ComponentAttrs } from '../types/index.js';
+export interface TextareaEmits {
+    'update:modelValue': [payload: string];
+    'blur': [event: FocusEvent];
+    'change': [event: Event];
+}
+export interface TextareaSlots {
+    default?: (props?: {}) => any;
+}
+type TextareaVariants = VariantProps<typeof textarea>;
+export interface TextareaProps extends ComponentAttrs<typeof textarea> {
+    /**
+     * The element or component this component should render as.
+     * @default "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;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<TextareaProps & {
+    modelValue?: string | number;
+}, {
+    textareaRef: Readonly<import("vue").ShallowRef<HTMLTextAreaElement | null>>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: (event: FocusEvent) => any;
+    change: (event: Event) => any;
+    "update:modelValue": (...args: unknown[]) => any;
+}, string, import("vue").PublicProps, Readonly<TextareaProps & {
+    modelValue?: string | number;
+}> & Readonly<{
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onChange?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+}>, {
+    variant: "outline" | "soft" | "soft-outline" | "ghost" | "none";
+    autofocusDelay: number;
+    rows: number;
+    maxRows: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, TextareaSlots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};