@byyuurin/ui 0.3.0 → 0.4.0

package/dist/runtime/components/FileUpload.vue

@@ -0,0 +1,267 @@
+<script>
+import theme from "#build/ui/file-upload";
+</script>
+
+<script setup>
+import { createReusableTemplate } from "@vueuse/core";
+import { Primitive, VisuallyHidden } from "reka-ui";
+import { computed, toRef, watch } from "vue";
+import { useAppConfig } from "#imports";
+import { useFileUpload } from "../composables/useFileUpload";
+import { useFormField } from "../composables/useFormField";
+import { useLocale } from "../composables/useLocale";
+import { pick } from "../utils";
+import { cv, merge } from "../utils/style";
+import Avatar from "./Avatar.vue";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  modelValue: { type: null, required: false },
+  icon: { type: [String, Object], required: false },
+  label: { type: String, required: false },
+  description: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  layout: { type: null, required: false, default: "grid" },
+  position: { type: null, required: false, default: "outside" },
+  highlight: { type: Boolean, required: false },
+  accept: { type: String, required: false, default: "*" },
+  multiple: { type: Boolean, required: false, default: false },
+  reset: { type: Boolean, required: false, default: false },
+  dropzone: { type: Boolean, required: false, default: true },
+  interactive: { type: Boolean, required: false, default: true },
+  required: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  fileIcon: { type: [String, Object], required: false },
+  fileDelete: { type: [Boolean, Object], required: false, default: true },
+  fileDeleteIcon: { type: [String, Object], required: false },
+  preview: { type: Boolean, required: false, default: true },
+  ui: { type: null, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true }
+});
+const emit = defineEmits(["change"]);
+const slots = defineSlots();
+const modelValue = defineModel({ type: null });
+const { t } = useLocale();
+const [DefineFilesTemplate, ReuseFilesTemplate] = createReusableTemplate();
+const { isDragging, open, inputRef, dropzoneRef } = useFileUpload({
+  accept: toRef(() => props.accept),
+  reset: props.reset,
+  multiple: toRef(() => props.multiple),
+  dropzone: toRef(() => props.dropzone),
+  onUpdate
+});
+const { id, name, disabled, ariaAttrs, emitFormInput, emitFormChange } = useFormField(props);
+const variant = computed(() => props.multiple ? "area" : props.variant);
+const layout = computed(() => props.variant === "button" && !props.multiple ? "grid" : props.layout);
+const position = computed(() => {
+  if (layout.value === "grid" && props.multiple)
+    return "inside";
+  if (variant.value === "button")
+    return "outside";
+  return props.position;
+});
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const styler = cv(merge(theme, appConfig.ui.fileUpload));
+  return styler({
+    ...pick(props, ["dropzone", "interactive", "color", "size", "multiple", "highlight"]),
+    variant: variant.value,
+    layout: layout.value,
+    position: position.value,
+    disabled: disabled.value
+  });
+});
+function createObjectUrl(file) {
+  return URL.createObjectURL(file);
+}
+function formatFileSize(bytes) {
+  if (bytes === 0)
+    return "0B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const size = bytes / k ** i;
+  const formattedSize = i === 0 ? size.toString() : size.toFixed(0);
+  return `${formattedSize}${sizes[i]}`;
+}
+function onUpdate(files, reset = false) {
+  if (props.multiple) {
+    if (reset) {
+      modelValue.value = files;
+    } else {
+      const existingFiles = modelValue.value || [];
+      modelValue.value = [...existingFiles, ...files || []];
+    }
+  } else {
+    modelValue.value = files?.[0];
+  }
+  const event = new Event("change", { target: { value: modelValue.value } });
+  emit("change", event);
+  emitFormChange();
+  emitFormInput();
+}
+function removeFile(index) {
+  if (!modelValue.value)
+    return;
+  if (!props.multiple || index === void 0) {
+    onUpdate([], true);
+    dropzoneRef.value?.focus();
+    return;
+  }
+  const files = [...modelValue.value];
+  files.splice(index, 1);
+  onUpdate(files, true);
+  dropzoneRef.value?.focus();
+}
+watch(modelValue, (newValue) => {
+  const hasModelReset = props.multiple ? !newValue?.length : !newValue;
+  if (hasModelReset && inputRef.value?.$el)
+    inputRef.value.$el.value = "";
+});
+defineExpose({
+  inputRef: toRef(() => inputRef.value?.$el),
+  dropzoneRef
+});
+</script>
+
+<template>
+  <DefineFilesTemplate>
+    <template v-if="props.preview && modelValue && (Array.isArray(modelValue) ? modelValue.length : true)">
+      <slot name="files-top" :files="modelValue" :open="open" :remove-file="removeFile"></slot>
+
+      <div :class="ui.files({ class: props.ui?.files })" data-part="files">
+        <slot name="files" :files="modelValue">
+          <div v-for="(file, index) in Array.isArray(modelValue) ? modelValue : [modelValue]" :key="index" :class="ui.file({ class: props.ui?.file })" data-part="file">
+            <slot name="file" :file="file" :index="index">
+              <slot name="file-leading" :file="file" :index="index" :ui="ui">
+                <Avatar
+                  :as="{ img: 'img' }"
+                  :src="createObjectUrl(file)"
+                  :icon="props.fileIcon || appConfig.ui.icons.file"
+                  :size="props.size"
+                  :class="ui.fileLeadingAvatar({ class: props.ui?.fileLeadingAvatar })"
+                  data-part="fileLeadingAvatar"
+                />
+              </slot>
+
+              <div :class="ui.fileWrapper({ class: props.ui?.fileWrapper })" data-part="fileWrapper">
+                <span :class="ui.fileName({ class: props.ui?.fileName })" data-part="fileName">
+                  <slot name="file-name" :file="file" :index="index">
+                    {{ file.name }}
+                  </slot>
+                </span>
+
+                <span :class="ui.fileSize({ class: props.ui?.fileSize })" data-part="fileSize">
+                  <slot name="file-size" :file="file" :index="index">
+                    {{ formatFileSize(file.size) }}
+                  </slot>
+                </span>
+              </div>
+
+              <slot name="file-trailing" :file="file" :index="index" :ui="ui">
+                <Button
+                  v-if="props.fileDelete"
+                  color="neutral"
+                  v-bind="{
+  ...layout === 'grid' ? { variant: 'solid', size: 'xs' } : { variant: 'link', size: props.size },
+  ...typeof props.fileDelete === 'object' ? props.fileDelete : void 0
+}"
+                  :aria-label="t('fileUpload.removeFile', { filename: file.name })"
+                  :trailing-icon="props.fileDeleteIcon || appConfig.ui.icons.close"
+                  :class="ui.fileTrailingButton({ class: props.ui?.fileTrailingButton })"
+                  data-part="fileTrailingButton"
+                  @click.stop.prevent="removeFile(index)"
+                />
+              </slot>
+            </slot>
+          </div>
+        </slot>
+      </div>
+
+      <slot name="files-bottom" :files="modelValue" :open="open" :remove-file="removeFile"></slot>
+    </template>
+  </DefineFilesTemplate>
+
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" data-part="root">
+    <slot :open="open" :remove-file="removeFile" :ui="ui">
+      <component
+        :is="variant === 'button' ? 'button' : 'div'"
+        ref="dropzoneRef"
+        :type="variant === 'button' ? 'button' : void 0"
+        :role="variant === 'button' ? void 0 : 'button'"
+        :tabindex="props.interactive && disabled ? 0 : -1"
+        :data-dragging="isDragging"
+        :class="ui.base({ class: props.ui?.base })"
+        data-part="base"
+        @click="props.interactive && !disabled && open()"
+        @keydown.space.prevent
+        @keyup.enter.space="props.interactive && !disabled && open()"
+      >
+        <ReuseFilesTemplate v-if="position === 'inside'" />
+
+        <div
+          v-if="props.preview && position === 'inside' ? props.multiple ? !modelValue?.length : !modelValue : true"
+          :class="ui.wrapper({ class: props.ui?.wrapper })"
+          data-part="wrapper"
+        >
+          <slot name="leading" :ui="ui">
+            <Icon
+              v-if="variant === 'button'"
+              :name="props.icon || appConfig.ui.icons.upload"
+              :class="ui.icon({ class: props.ui?.icon })"
+              data-part="icon"
+            />
+            <Avatar
+              v-else
+              :icon="props.icon || appConfig.ui.icons.upload"
+              :size="props.size"
+              :ui="{ icon: props.ui?.icon }"
+              :class="ui.avatar({ class: props.ui?.avatar })"
+              data-part="avatar"
+            />
+          </slot>
+
+          <template v-if="variant !== 'button'">
+            <div v-if="props.label || slots.label" :class="ui.label({ class: props.ui?.label })" data-part="label">
+              <slot name="label">
+                {{ props.label }}
+              </slot>
+            </div>
+
+            <div v-if="props.description || slots.description" :class="ui.description({ class: props.ui?.description })">
+              <slot name="description">
+                {{ props.description }}
+              </slot>
+            </div>
+
+            <div v-if="slots.actions">
+              <slot name="actions" :files="modelValue || null" :open="open" :remove-file="removeFile"></slot>
+            </div>
+          </template>
+        </div>
+      </component>
+
+      <ReuseFilesTemplate v-if="position === 'outside'" />
+    </slot>
+
+    <VisuallyHidden
+      :id="id"
+      ref="inputRef"
+      as="input"
+      type="file"
+      feature="fully-hidden"
+      :name="name"
+      :accept="props.accept"
+      :multiple="props.multiple"
+      :required="props.required"
+      :disabled="disabled"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+    />
+  </Primitive>
+</template>

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

@@ -0,0 +1,178 @@
+import type { VariantProps } from '@byyuurin/ui-kit';
+import type { UseFileDialogReturn } from '@vueuse/core';
+import type { PrimitiveProps } from 'reka-ui';
+import theme from '#build/ui/file-upload';
+import type { ButtonProps, ComponentBaseProps, ComponentStyler, ComponentUIProps, IconProps, LinkPropsKeys } from '../types';
+import type { InputHTMLAttributes } from '../types/html';
+import type { MaybeNull, StaticSlot } from '../types/utils';
+type ThemeVariants = VariantProps<typeof theme>;
+export interface FileUploadProps<M extends boolean = false> extends ComponentBaseProps, /** @vue-ignore */ Pick<InputHTMLAttributes, 'form' | 'formaction' | 'formenctype' | 'formmethod' | 'formnovalidate' | 'formtarget'> {
+    /**
+     * The element or component this component should render as.
+     * @default "div"
+     */
+    as?: PrimitiveProps['as'];
+    id?: string;
+    name?: string;
+    modelValue?: MaybeNull<M extends true ? File[] : File>;
+    /**
+     * The icon to display.
+     * @default app.icons.upload
+     */
+    icon?: IconProps['name'];
+    label?: string;
+    description?: string;
+    /** @default "primary" */
+    color?: ThemeVariants['color'];
+    /**
+     * The `button` variant is only available when `multiple` is `false`.
+     * @default "area"
+     */
+    variant?: ThemeVariants['variant'];
+    /** @default "md" */
+    size?: ThemeVariants['size'];
+    /**
+     * The layout of how files are displayed.
+     * Only works when `variant` is `area`.
+     * @default "list"
+     */
+    layout?: ThemeVariants['layout'];
+    /**
+     * The position of the files.
+     * Only works when `variant` is `area` and when `layout` is `list`.
+     * @default "outside"
+     */
+    position?: ThemeVariants['position'];
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    /**
+     * Specifies the allowed file types for the input. Provide a comma-separated list of MIME types or file extensions (e.g., "image/png,application/pdf,.jpg").
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/accept
+     * @default "*"
+     */
+    accept?: string;
+    multiple?: M & boolean;
+    /**
+     * Reset the file input when the dialog is opened.
+     * @default false
+     */
+    reset?: boolean;
+    /**
+     * Create a zone that allows the user to drop files onto it.
+     * @default true
+     */
+    dropzone?: boolean;
+    /**
+     * Make the dropzone interactive when the user is clicking on it.
+     * @default true
+     */
+    interactive?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /**
+     * The icon to display for the file.
+     * @default app.icons.file
+     */
+    fileIcon?: IconProps['name'];
+    /**
+     * Configure the delete button for the file.
+     *
+     * When `layout` is `grid`, the default is `{ color: 'neutral', variant: 'solid', size: 'xs' }`
+     *
+     * When `layout` is `list`, the default is `{ color: 'neutral', variant: 'link' }`
+     */
+    fileDelete?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The icon displayed to delete a file.
+     * @default app.icons.close
+     */
+    fileDeleteIcon?: IconProps['name'];
+    /**
+     * Show the file preview/list after upload.
+     * @default true
+     */
+    preview?: boolean;
+    ui?: ComponentUIProps<typeof theme>;
+}
+export interface FileUploadEmits {
+    change: [event: Event];
+}
+type FileUploadFiles<M> = (M extends true ? File[] : File) | null;
+export interface FileUploadSlots<M extends boolean = false> {
+    'default': StaticSlot<{
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'leading': StaticSlot<{
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'label': StaticSlot;
+    'description': StaticSlot;
+    'actions': StaticSlot<{
+        files: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }>;
+    'files': StaticSlot<{
+        files: FileUploadFiles<M>;
+    }>;
+    'files-top': StaticSlot<{
+        files: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }>;
+    'files-bottom': StaticSlot<{
+        files: FileUploadFiles<M>;
+        open: UseFileDialogReturn['open'];
+        removeFile: (index?: number) => void;
+    }>;
+    'file': StaticSlot<{
+        file: File;
+        index: number;
+    }>;
+    'file-leading': StaticSlot<{
+        file: File;
+        index: number;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+    'file-name': StaticSlot<{
+        file: File;
+        index: number;
+    }>;
+    'file-size': StaticSlot<{
+        file: File;
+        index: number;
+    }>;
+    'file-trailing': StaticSlot<{
+        file: File;
+        index: number;
+        ui: ComponentStyler<typeof theme>;
+    }>;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(FileUploadProps<M> & {
+        modelValue?: MaybeNull<(M extends true ? File[] : File)>;
+    }) & {
+        onChange?: ((event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: MaybeNull<M extends true ? File[] : File> | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        inputRef: Readonly<import("vue").Ref<HTMLInputElement, HTMLInputElement>>;
+        dropzoneRef: import("vue").ShallowRef<HTMLDivElement | undefined, HTMLDivElement | undefined>;
+    }>) => void;
+    attrs: any;
+    slots: FileUploadSlots<M>;
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: MaybeNull<M extends true ? File[] : File> | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Form.vue

@@ -8,6 +8,7 @@ import { computed, nextTick, onMounted, onUnmounted, reactive, readonly, ref, sh
 import { useAppConfig } from "#imports";
 import { injectFormBus, injectFormState, provideFormBus, provideFormErrors, provideFormInputs, provideFormLoading, provideFormOptions, provideFormState } from "../composables/useFormField";
 import { FormValidationException } from "../types/form";
+import { pick } from "../utils";
 import { getAtPath, setAtPath, validateSchema } from "../utils/form";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
@@ -264,18 +265,18 @@ defineExpose(api);
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.form));
-  return styler(props);
+  return styler(pick(props, []));
 });
 </script>
 
 <template>
-  <component
-    :is="parentBus ? 'div' : 'form'"
-    :id="formId"
-    :class="ui.base({ class: props.class })"
-    data-part="base"
-    @submit.prevent="onSubmitWrapper"
-  >
-    <slot :errors="errors" :loading="loading"></slot>
-  </component>
+  <component
+    :is="parentBus ? 'div' : 'form'"
+    :id="formId"
+    :class="ui.base({ class: props.class })"
+    data-part="base"
+    @submit.prevent="onSubmitWrapper"
+  >
+    <slot :errors="errors" :loading="loading"></slot>
+  </component>
 </template>

package/dist/runtime/components/FormField.vue

@@ -7,6 +7,7 @@ import { Label, Primitive } from "reka-ui";
 import { computed, ref, useId, watch } from "vue";
 import { useAppConfig } from "#imports";
 import { injectFormErrors, injectFormInputs, provideFormField, provideFormInputId } from "../composables/useFormField";
+import { pick } from "../utils";
 import { cv, merge } from "../utils/style";
 const props = defineProps({
   as: { type: null, required: false },
@@ -64,46 +65,46 @@ provideFormField(computed(() => ({
 const appConfig = useAppConfig();
 const ui = computed(() => {
   const styler = cv(merge(theme, appConfig.ui.formField));
-  return styler(props);
+  return styler(pick(props, ["size", "required", "orientation"]));
 });
 </script>
 
 <template>
-  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-orientation="props.orientation" data-part="root">
-    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
-      <div v-if="props.label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })" data-part="labelWrapper">
-        <Label :for="id" :class="ui.label({ class: props.ui?.label })" data-part="label">
-          <slot name="label" :label="props.label">
-            {{ props.label }}
-          </slot>
-        </Label>
-        <span v-if="props.hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })" data-part="hint">
-          <slot name="hint" :hint="props.hint">
-            {{ props.hint }}
-          </slot>
-        </span>
-      </div>
-
-      <p v-if="props.description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })" data-part="description">
-        <slot name="description" :description="props.description">
-          {{ props.description }}
-        </slot>
-      </p>
-    </div>
-
-    <div :class="(props.label || !!slots.label || props.description || !!slots.description) && ui.container({ class: props.ui?.container })" data-part="container">
-      <slot :error="error"></slot>
-
-      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })" data-part="error">
-        <slot name="error" :error="error">
-          {{ error }}
-        </slot>
-      </div>
-      <div v-else-if="props.help || !!slots.help" :class="ui.help({ class: props.ui?.help })" data-part="help">
-        <slot name="help" :help="props.help">
-          {{ props.help }}
-        </slot>
-      </div>
-    </div>
-  </Primitive>
+  <Primitive :as="props.as" :class="ui.root({ class: [props.ui?.root, props.class] })" :data-orientation="props.orientation" data-part="root">
+    <div :class="ui.wrapper({ class: props.ui?.wrapper })" data-part="wrapper">
+      <div v-if="props.label || !!slots.label" :class="ui.labelWrapper({ class: props.ui?.labelWrapper })" data-part="labelWrapper">
+        <Label :for="id" :class="ui.label({ class: props.ui?.label })" data-part="label">
+          <slot name="label" :label="props.label">
+            {{ props.label }}
+          </slot>
+        </Label>
+        <span v-if="props.hint || !!slots.hint" :id="`${ariaId}-hint`" :class="ui.hint({ class: props.ui?.hint })" data-part="hint">
+          <slot name="hint" :hint="props.hint">
+            {{ props.hint }}
+          </slot>
+        </span>
+      </div>
+
+      <p v-if="props.description || !!slots.description" :id="`${ariaId}-description`" :class="ui.description({ class: props.ui?.description })" data-part="description">
+        <slot name="description" :description="props.description">
+          {{ props.description }}
+        </slot>
+      </p>
+    </div>
+
+    <div :class="(props.label || !!slots.label || props.description || !!slots.description) && ui.container({ class: props.ui?.container })" data-part="container">
+      <slot :error="error"></slot>
+
+      <div v-if="props.error !== false && (typeof error === 'string' && error || !!slots.error)" :id="`${ariaId}-error`" :class="ui.error({ class: props.ui?.error })" data-part="error">
+        <slot name="error" :error="error">
+          {{ error }}
+        </slot>
+      </div>
+      <div v-else-if="props.help || !!slots.help" :class="ui.help({ class: props.ui?.help })" data-part="help">
+        <slot name="help" :help="props.help">
+          {{ props.help }}
+        </slot>
+      </div>
+    </div>
+  </Primitive>
 </template>

package/dist/runtime/components/Icon.vue

@@ -15,6 +15,6 @@ const iconProps = useForwardProps(reactivePick(props, "name", "mode", "size", "c
 </script>
 
 <template>
-  <Icon v-if="typeof props.name === 'string'" v-bind="iconProps" />
-  <component :is="props.name" v-else />
+  <Icon v-if="typeof props.name === 'string'" v-bind="iconProps" />
+  <component :is="props.name" v-else />
 </template>