@byyuurin/ui 0.0.10 → 0.1.0

package/dist/runtime/components/Checkbox.vue

@@ -1,102 +1,100 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { CheckboxRootProps, PrimitiveProps } from 'reka-ui'
-import type { checkbox } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-export interface CheckboxEmits {
-  change: [payload: Event]
-}
-
-export interface CheckboxSlots {
-  label?: (props: { label?: string }) => any
-  description?: (props: { description?: string }) => any
-}
-
-type CheckboxVariants = VariantProps<typeof checkbox>
-
-export interface CheckboxProps extends ComponentAttrs<typeof checkbox>, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  label?: string
-  description?: string
-  size?: CheckboxVariants['size']
-  /**
-   * The icon displayed when checked.
-   * @default app.icons.check
-   */
-  icon?: string
-  /**
-   * The icon displayed when the checkbox is indeterminate.
-   * @default app.icons.indeterminate
-   */
-  indeterminateIcon?: string
-}
+<script>
+import theme from "#build/ui/checkbox";
 </script>
 
-<script lang="ts" setup>
-import { reactivePick } from '@vueuse/core'
-import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } from 'reka-ui'
-import { computed, useId } from 'vue'
-import { useFormItem } from '../composables/useFormItem'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(defineProps<CheckboxProps>(), {
-  required: false,
-  disabled: false,
-})
-const emit = defineEmits<CheckboxEmits>()
-const slots = defineSlots<CheckboxSlots>()
-
-const innerValue = defineModel<boolean | 'indeterminate'>({ default: undefined })
-const rootProps = useForwardProps(reactivePick(props, 'required', 'value', 'defaultValue'))
-
-const { id: _id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormItem<CheckboxProps>(props)
-const id = _id.value ?? useId()
-
-const { theme, generateStyle } = useTheme()
-const style = computed(() => generateStyle('checkbox', {
-  ...props,
-  size: size.value,
-  disabled: disabled.value,
-}))
-
-function onUpdate(value: any) {
-  // @ts-expect-error - 'target' does not exist in type 'EventInit'
-  const event = new Event('change', { target: value })
-  emit('change', event)
-  emitFormChange()
-  emitFormInput()
+<script setup>
+import { reactivePick, useVModel } from "@vueuse/core";
+import { CheckboxIndicator, CheckboxRoot, Label, Primitive, useForwardProps } from "reka-ui";
+import { computed, useId } from "vue";
+import { useAppConfig } from "#imports";
+import { useFormField } from "../composables/useFormField";
+import { cv, merge } from "../utils/style";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  variant: { type: null, required: false },
+  color: { type: null, required: false },
+  size: { type: null, required: false },
+  indicator: { type: null, required: false },
+  icon: { type: [String, Object], required: false },
+  indeterminateIcon: { type: [String, Object], required: false },
+  modelValue: { type: [Boolean, String], required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  disabled: { type: Boolean, required: false, default: false },
+  required: { type: Boolean, required: false, default: false },
+  name: { type: String, required: false },
+  value: { type: null, required: false },
+  id: { type: String, required: false },
+  defaultValue: { type: [Boolean, String], required: false }
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+const slots = defineSlots();
+const modelValue = useVModel(props, "modelValue", emit);
+const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
+const { id: _id, size, name, disabled, ariaAttrs, emitFormChange, emitFormInput } = useFormField(props);
+const id = _id.value ?? useId();
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.checkbox));
+  return styler({
+    ...props,
+    size: size.value,
+    disabled: disabled.value
+  });
+});
+function onUpdate(value) {
+  const event = new Event("change", { target: value });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
 }
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.root({ class: [props.class, props.ui?.root] })">
-    <div :class="style.container({ class: props.ui?.container })">
+  <Primitive :as="!props.variant || props.variant === 'list' ? props.as : Label" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <div :class="ui.container({ class: props.ui?.container })" data-part="container">
       <CheckboxRoot
-        v-slot="{ modelValue }"
-        v-bind="{ ...rootProps, ...ariaAttrs, id, name, disabled }"
-        v-model="innerValue"
-        :class="style.base({ class: props.ui?.base })"
+        v-bind="{ id, ...rootProps, ...$attrs, ...ariaAttrs, name, disabled }"
+        v-model="modelValue"
+        :class="ui.base({ class: props.ui?.base })"
+        data-part="base"
         @update:model-value="onUpdate"
       >
-        <CheckboxIndicator as-child force-mount>
-          <span
-            v-if="modelValue === 'indeterminate'"
-            :class="style.icon({ class: [props.indeterminateIcon || theme.app.icons.indeterminate, props.ui?.icon] })"
-          ></span>
-          <span v-else :class="style.icon({ class: [props.icon, theme.app.icons.check, props.ui?.icon] })"></span>
-        </CheckboxIndicator>
+        <template #default="{ modelValue }">
+          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })" data-part="indicator">
+            <Icon
+              v-if="modelValue === 'indeterminate'"
+              :name="props.indeterminateIcon || appConfig.ui.icons.minus"
+              :class="ui.icon({ class: props.ui?.icon })"
+              data-part="icon"
+            />
+            <Icon
+              v-else
+              :name="props.icon || appConfig.ui.icons.check"
+              :class="ui.icon({ class: props.ui?.icon })"
+              data-part="icon"
+            />
+          </CheckboxIndicator>
+        </template>
       </CheckboxRoot>
     </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 })">
+    <div v-if="props.label || !!slots.label || props.description || !!slots.description" :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <component
+        :is="!props.variant || props.variant === 'list' ? Label : 'p'"
+        v-if="props.label || !!slots.label"
+        :for="id"
+        :class="ui.label({ class: props.ui?.label })"
+        data-part="label"
+      >
+        <slot name="label" :label="props.label">
+          {{ props.label }}
+        </slot>
+      </component>
+      <p v-if="props.description || !!slots.description" :class="ui.description({ class: props.ui?.description })" data-part="description">
         <slot name="description" :description="props.description">
           {{ props.description }}
         </slot>

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

@@ -0,0 +1,63 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { CheckboxRootEmits, CheckboxRootProps, PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/checkbox';
+import type { ComponentBaseProps, ComponentUIProps, IconProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface CheckboxProps extends ComponentBaseProps, Pick<CheckboxRootProps, 'disabled' | 'required' | 'name' | 'value' | 'id' | 'defaultValue'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    label?: string;
+    description?: string;
+    /** @default "list" */
+    variant?: ThemeVariants['variant'];
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** @default "start" */
+    indicator?: ThemeVariants['indicator'];
+    /**
+     * The icon displayed when checked.
+     * @default app.icons.check
+     */
+    icon?: IconProps['name'];
+    /**
+     * The icon displayed when the checkbox is indeterminate.
+     * @default app.icons.minus
+     */
+    indeterminateIcon?: IconProps['name'];
+    modelValue?: boolean | 'indeterminate';
+    ui?: ComponentUIProps<typeof theme>;
+}
+export type CheckboxEmits = CheckboxRootEmits & {
+    change: [event: Event];
+};
+export interface CheckboxSlots {
+    label: StaticSlot<{
+        label?: string;
+    }>;
+    description: StaticSlot<{
+        description?: string;
+    }>;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    change: (event: Event) => any;
+    "update:modelValue": (value: boolean | "indeterminate") => any;
+}, string, import("vue").PublicProps, Readonly<CheckboxProps> & Readonly<{
+    onChange?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => any) | undefined;
+}>, {
+    disabled: boolean;
+    required: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CheckboxSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Chip.vue

@@ -1,66 +1,52 @@
-<script lang="ts">
-import type { VariantProps } from '@byyuurin/ui-kit'
-import type { PrimitiveProps } from 'reka-ui'
-import type { UseComponentIconsProps } from '../composables/useComponentIcons'
-import type { chip } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-export interface ChipSlots {
-  leading?: (props?: {}) => any
-  default?: (props?: {}) => any
-  trailing?: (props?: {}) => any
-}
-
-type ChipVariants = VariantProps<typeof chip>
-
-export interface ChipProps extends ComponentAttrs<typeof chip>, Omit<UseComponentIconsProps, 'loading' | 'loadingIcon'> {
-  /**
-   * The element or component this component should render as.
-   * @default "div"
-   */
-  as?: PrimitiveProps['as']
-  variant?: ChipVariants['variant']
-  size?: ChipVariants['size']
-  label?: string
-}
+<script>
+import theme from "#build/ui/chip";
 </script>
 
-<script setup lang="ts">
-import { Primitive } from 'reka-ui'
-import { computed } from 'vue'
-import { useButtonGroup } from '../composables/useButtonGroup'
-import { useComponentIcons } from '../composables/useComponentIcons'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(defineProps<ChipProps>(), {
-  variant: 'solid',
-})
-
-const slots = defineSlots<ChipSlots>()
-
-const { size, orientation } = useButtonGroup(props)
-const { isLeading, leadingIconName, isTrailing, trailingIconName } = useComponentIcons(props)
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('chip', {
-  ...props,
-  size: size.value,
-  groupOrientation: orientation.value,
-}))
+<script setup>
+import { useVModel } from "@vueuse/core";
+import { Primitive, Slot } from "reka-ui";
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { useAvatarGroup } from "../composables/useAvatarGroup";
+import { cv, merge } from "../utils/style";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  text: { type: [String, Number], required: false },
+  size: { type: null, required: false },
+  color: { type: null, required: false },
+  position: { type: null, required: false },
+  show: { type: Boolean, required: false, default: true },
+  inset: { type: Boolean, required: false },
+  standalone: { type: Boolean, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+const emit = defineEmits(["update:show"]);
+defineSlots();
+const show = useVModel(props, "show", emit);
+const { size } = useAvatarGroup(props);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.chip));
+  return styler({ ...props, size: size.value });
+});
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="style.base({ class: [props.class, props.ui?.base] })">
-    <slot name="leading">
-      <span v-if="isLeading && leadingIconName" :class="style.leadingIcon({ class: [leadingIconName, props.ui?.leadingIcon] })"></span>
-    </slot>
-
-    <span v-if="props.label || slots.default" :class="style.label({ class: props.ui?.label })">
-      <slot>{{ props.label }}</slot>
+  <Primitive
+    :as="props.as"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
+  >
+    <Slot v-bind="$attrs">
+      <slot></slot>
+    </Slot>
+
+    <span v-if="show" :class="ui.base({ class: props.ui?.base })" data-part="base">
+      <slot name="content">
+        {{ props.text }}
+      </slot>
     </span>
-
-    <slot name="trailing">
-      <span v-if="isTrailing && trailingIconName" :class="style.trailingIcon({ class: [trailingIconName, props.ui?.trailingIcon] })"></span>
-    </slot>
   </Primitive>
 </template>

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

@@ -0,0 +1,48 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/chip';
+import type { ComponentBaseProps, ComponentUIProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface ChipProps extends ComponentBaseProps {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    /** Display some text inside the chip. */
+    text?: string | number;
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /** @default "top-right" */
+    position?: ThemeVariants['position'];
+    show?: boolean;
+    /** When `true`, keep the chip inside the component for rounded elements. */
+    inset?: boolean;
+    /** When `true`, render the chip relatively to the parent. */
+    standalone?: boolean;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface ChipEmits {
+    'update:show': [show: boolean];
+}
+export interface ChipSlots {
+    default: StaticSlot;
+    content: StaticSlot;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:show": (show: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<ChipProps> & Readonly<{
+    "onUpdate:show"?: ((show: boolean) => any) | undefined;
+}>, {
+    show: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/Collapsible.vue

@@ -1,48 +1,44 @@
-<script lang="ts">
-import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
-import type { collapsible } from '../theme'
-import type { ComponentAttrs } from '../types'
-
-export interface CollapsibleEmits extends CollapsibleRootEmits {}
-
-export interface CollapsibleSlots {
-  default?: (props: { open: boolean }) => any
-  content?: (props?: {}) => any
-}
-
-export interface CollapsibleProps extends ComponentAttrs<typeof collapsible>, Pick<CollapsibleRootProps, 'as' | 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
-}
+<script>
+import theme from "#build/ui/collapsible";
 </script>
 
-<script setup lang="ts">
-import { reactivePick } from '@vueuse/core'
-import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useForwardPropsEmits } from 'reka-ui'
-import { computed } from 'vue'
-import { useTheme } from '../composables/useTheme'
-
-const props = withDefaults(defineProps<CollapsibleProps>(), {
-  unmountOnHide: true,
-})
-const emit = defineEmits<CollapsibleEmits>()
-const slots = defineSlots<CollapsibleSlots>()
-
-const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultOpen', 'open', 'disabled', 'unmountOnHide'), emit)
-
-const { generateStyle } = useTheme()
-const style = computed(() => generateStyle('collapsible', props))
+<script setup>
+import { reactivePick } from "@vueuse/core";
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger, useForwardPropsEmits } from "reka-ui";
+import { computed } from "vue";
+import { useAppConfig } from "#imports";
+import { cv, merge } from "../utils/style";
+const props = defineProps({
+  as: { type: null, required: false },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  defaultOpen: { type: Boolean, required: false },
+  open: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["update:open"]);
+const slots = defineSlots();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "defaultOpen", "open", "disabled", "unmountOnHide"), emit);
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.collapsible));
+  return styler(props);
+});
 </script>
 
 <template>
   <CollapsibleRoot
     v-slot="{ open }"
     v-bind="rootProps"
-    :class="style.root({ class: [props.class, props.ui?.root] })"
+    :class="ui.root({ class: [props.ui?.root, props.class] })"
+    data-part="root"
   >
-    <CollapsibleTrigger v-if="slots.default" as-child>
+    <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open"></slot>
     </CollapsibleTrigger>
 
-    <CollapsibleContent :class="style.content({ class: props.ui?.content })">
+    <CollapsibleContent :class="ui.content({ class: props.ui?.content })" data-part="content">
       <slot name="content"></slot>
     </CollapsibleContent>
   </CollapsibleRoot>

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

@@ -0,0 +1,34 @@
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui';
+import theme from '#build/ui/collapsible';
+import type { ComponentBaseProps, ComponentUIProps } from '../types';
+import type { StaticSlot } from '../types/utils';
+export interface CollapsibleProps extends ComponentBaseProps, Pick<CollapsibleRootProps, 'defaultOpen' | 'open' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: CollapsibleRootProps['as'];
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface CollapsibleEmits extends CollapsibleRootEmits {
+}
+export interface CollapsibleSlots {
+    default: StaticSlot<{
+        open: boolean;
+    }>;
+    content: StaticSlot;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<CollapsibleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<CollapsibleProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {
+    unmountOnHide: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CollapsibleSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};