@hywax/cms 0.0.23 → 1.0.1

package/dist/runtime/components/AutocompleteSelect.vue

@@ -1,59 +1,80 @@
 <template>
-  <USelectMenu
-    v-model:search-term="searchTerm"
-    v-model:open="isOpen"
-    :model-value="modelValue"
-    :items="items"
-    :loading="isLoading"
-    ignore-filter
-    :value-key="valueKey"
-    :label-key="labelKey"
-    :placeholder="placeholder"
-    :content="{ 'data-autocomplete-select-content': autocompleteSelectId }"
-    :multiple="multiple"
-    :class="ui.root({ class: [props.ui?.root, props.class] })"
-    @update:model-value="emit('update:modelValue', $event)"
-  >
-    <template v-if="modelValue && !props.multiple">
-      <span class="truncate pointer-events-none">
-        {{ getCachedLabel(modelValue) }}
-      </span>
-    </template>
+  <ClientOnly>
+    <USelectMenu
+      v-model:search-term="searchTerm"
+      v-model:open="isOpen"
+      :model-value="modelValue"
+      :items="items"
+      ignore-filter
+      :value-key="valueKey"
+      :label-key="labelKey"
+      :placeholder="placeholder"
+      :multiple="multiple"
+      :ui="{ viewport: viewportId }"
+      @update:model-value="$emit('update:modelValue', $event)"
+    >
+      <template v-if="props.multiple ? modelValue?.length : modelValue">
+        <span class="truncate pointer-events-none">
+          {{ cachedLabel }}
+        </span>
+      </template>
+
+      <template v-if="slots['item-label']" #item-label="{ item }">
+        <slot name="item-label" :item="item" />
+      </template>
 
-    <template v-if="!multiple" #trailing>
-      <ButtonClear
-        :model-value="modelValue"
-        :reset-value="resetValue"
-        @update:model-value="$emit('update:modelValue', $event)"
-      />
+      <template #trailing>
+        <UIcon v-if="isLoading" :name="appConfig.ui.icons.loading" class="shrink-0 text-dimmed size-5 animate-spin" />
+        <template v-else>
+          <UButton
+            v-if="props.multiple ? modelValue?.length : modelValue"
+            :icon="appConfig.ui.icons.close"
+            variant="link"
+            size="sm"
+            color="neutral"
+            class="px-0"
+            @click="$emit('update:modelValue', void 0)"
+          />
+        </template>
+      </template>
+    </USelectMenu>
+
+    <template #placeholder>
+      <USkeleton class="w-full h-8" />
     </template>
-  </USelectMenu>
+  </ClientOnly>
 </template>
 
 <script>
-import theme from "#build/cms/autocomplete-select";
-import { computed, ref, refDebounced, shallowRef, toRaw, triggerRef, useAppConfig, useAsyncData, useId, useInfiniteScroll, useNuxtData, useOffsetPagination, watch } from "#imports";
-import { tv } from "../tv";
-import ButtonClear from "./ButtonClear.vue";
+import { useAppConfig, useAsyncData, useNuxtData } from "#imports";
+import { refDebounced, useInfiniteScroll, useOffsetPagination } from "@vueuse/core";
+import { computed, ref, shallowRef, toRaw, triggerRef, useId, watch } from "vue";
 </script>
 
 <script setup>
 const props = defineProps({
-  modelValue: { type: null, required: true },
+  modelValue: { type: null, required: false },
   cacheKey: { type: String, required: true },
   handler: { type: Function, required: true },
-  valueKey: { type: null, required: false },
-  labelKey: { type: null, required: false },
-  multiple: { type: null, required: false },
+  valueKey: { type: null, required: false, default: "id" },
+  labelKey: { type: null, required: false, default: "name" },
+  multiple: { type: Boolean, required: false },
   placeholder: { type: String, required: false },
-  resetValue: { type: [String, Number, Boolean, null], required: false, skipCheck: true },
-  class: { type: null, required: false },
-  ui: { type: null, required: false }
+  initSelected: { type: Boolean, required: false }
 });
-const emit = defineEmits(["update:modelValue"]);
+defineEmits(["update:modelValue"]);
+const slots = defineSlots();
 const appConfig = useAppConfig();
-const autocompleteSelectId = `autocomplete-select-${useId()}`;
-const { initialPagination, initialData, initialStatus } = useInitialData();
+const autocompleteSelectKey = `autocomplete-select:${props.cacheKey}`;
+const autocompleteSelectId = `${autocompleteSelectKey}:${useId()}`;
+const viewportId = `autocomplete-select-viewport-${useId()}`;
+const {
+  initialPagination,
+  initialData,
+  initialStatus,
+  initSelected,
+  initSelectedStatus
+} = useInitialData();
 const { fetchPage, nextPage, isLastPage, pageDataStatus, allPagesData } = usePageData({
   pagination: initialPagination,
   total: () => initialData.value?.pagination.total ?? 0
@@ -63,7 +84,8 @@ const { isOpen } = useInfiniteScrollData({ nextPage, isLastPage, fetchPage, sear
 const isLoading = computed(() => [
   initialStatus.value,
   pageDataStatus.value,
-  searchStatus.value
+  searchStatus.value,
+  initSelectedStatus.value
 ].includes("pending"));
 const items = computed(() => {
   if (searchTerm.value) {
@@ -74,22 +96,40 @@ const items = computed(() => {
     ...allPagesData.value
   ];
 });
-const { getCachedLabel } = useAutocompleteCache({ items });
+const { cachedLabel } = useAutocompleteCache({ items, initSelected });
 function useInitialData() {
   const initialPagination2 = { page: "1", perPage: "25" };
   const { data: initialData2, status: initialStatus2 } = useAsyncData(
-    `autocomplete-select:${props.cacheKey}`,
+    autocompleteSelectKey,
     () => props.handler({ ...initialPagination2, search: "" }),
     {
       lazy: true,
-      getCachedData: (key) => useNuxtData(key).data.value ?? void 0,
+      getCachedData: (key) => useNuxtData(key).data.value,
       dedupe: "defer"
     }
   );
+  const { data: initSelected2, status: initSelectedStatus2 } = useAsyncData(
+    `${autocompleteSelectId}:initial-value`,
+    async () => {
+      const result = await props.handler({
+        ...initialPagination2,
+        search: "",
+        ids: Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue]
+      });
+      return result.items;
+    },
+    {
+      lazy: true,
+      immediate: props.initSelected && (Array.isArray(props.modelValue) ? props.modelValue.length > 0 : !!props.modelValue),
+      default: () => []
+    }
+  );
   return {
     initialPagination: initialPagination2,
     initialData: initialData2,
-    initialStatus: initialStatus2
+    initialStatus: initialStatus2,
+    initSelected: initSelected2,
+    initSelectedStatus: initSelectedStatus2
   };
 }
 function usePageData(options) {
@@ -98,13 +138,17 @@ function usePageData(options) {
     pageSize: Number(options.pagination.perPage),
     page: Number(options.pagination.page)
   });
-  const { execute: fetchPage2, data: pageData, status: pageDataStatus2 } = useAsyncData(() => {
-    return props.handler({
-      page: String(currentPage.value),
-      perPage: String(currentPageSize.value),
-      search: ""
-    });
-  }, { immediate: false });
+  const { execute: fetchPage2, data: pageData, status: pageDataStatus2 } = useAsyncData(
+    `${autocompleteSelectId}:page-data`,
+    () => {
+      return props.handler({
+        page: currentPage.value.toString(),
+        perPage: currentPageSize.value.toString(),
+        search: ""
+      });
+    },
+    { immediate: false }
+  );
   const allPagesData2 = shallowRef([]);
   watch(pageData, (value) => {
     if (value?.items) {
@@ -116,12 +160,10 @@ function usePageData(options) {
 }
 function useInfiniteScrollData(options) {
   const isOpen2 = ref(false);
-  const contentDiv = ref(null);
+  const contentDiv = shallowRef(null);
   watch(isOpen2, (value) => {
     if (value) {
-      contentDiv.value = document.querySelector(`
-          [data-autocomplete-select-content="${autocompleteSelectId}"] [data-reka-combobox-viewport]
-        `) ?? null;
+      contentDiv.value = document.querySelector(`.${viewportId}`) ?? null;
     }
   }, { flush: "post" });
   useInfiniteScroll(contentDiv, () => {
@@ -131,16 +173,14 @@ function useInfiniteScrollData(options) {
   return { isOpen: isOpen2 };
 }
 function useSearch(options) {
+  const searchKey = `${autocompleteSelectId}:search`;
   const searchTerm2 = ref("");
   const searchTermDebounced = refDebounced(searchTerm2, 500);
-  let controller;
-  const { data: searchData2, status: searchStatus2, execute: search } = useAsyncData(() => {
-    controller?.abort();
-    controller = new AbortController();
+  const { data: searchData2, status: searchStatus2, execute: search } = useAsyncData(searchKey, (_, { signal }) => {
     return props.handler({
       ...options.pagination,
       search: searchTermDebounced.value
-    }, controller.signal);
+    }, signal);
   }, { lazy: true, immediate: false });
   watch(searchTermDebounced, (value) => {
     value && search();
@@ -149,23 +189,37 @@ function useSearch(options) {
 }
 function useAutocompleteCache(options) {
   const selectedItemCache = shallowRef(/* @__PURE__ */ new Map());
-  watch(() => [props.modelValue, options.items.value], ([value]) => {
-    const cacheSize = selectedItemCache.value.size;
-    (Array.isArray(value) ? value : [value]).forEach((code) => {
-      if (!code || selectedItemCache.value.has(code)) {
-        return;
-      }
-      const item = options.items.value.find((item2) => item2[props.valueKey] === code);
-      if (item) {
-        selectedItemCache.value.set(code, structuredClone(toRaw(item)));
+  const updateCache = (value) => {
+    if (!value || selectedItemCache.value.has(value)) {
+      return;
+    }
+    const item = options.initSelected.value.find((item2) => item2[props.valueKey] === value) || options.items.value.find((item2) => item2[props.valueKey] === value);
+    if (item) {
+      selectedItemCache.value.set(value, structuredClone(toRaw(item)));
+    }
+  };
+  watch(
+    () => [props.modelValue, options.items.value, options.initSelected.value],
+    ([value]) => {
+      const cacheSize = selectedItemCache.value.size;
+      if (Array.isArray(value)) {
+        value.forEach(updateCache);
+      } else {
+        updateCache(value);
       }
-    });
-    cacheSize !== selectedItemCache.value.size && triggerRef(selectedItemCache);
-  }, { immediate: true });
-  const getCachedLabel2 = (value) => {
+      cacheSize !== selectedItemCache.value.size && triggerRef(selectedItemCache);
+    },
+    { immediate: true }
+  );
+  const getCachedLabel = (value) => {
+    if (Array.isArray(value)) {
+      return value.map(getCachedLabel).join(", ");
+    }
     return selectedItemCache.value.get(value)?.[props.labelKey] ?? value;
   };
-  return { selectedItemCache, getCachedLabel: getCachedLabel2 };
+  const cachedLabel2 = computed(() => {
+    return props.modelValue && getCachedLabel(props.modelValue);
+  });
+  return { selectedItemCache, getCachedLabel, cachedLabel: cachedLabel2 };
 }
-const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.autocompleteSelect || {} })());
 </script>

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

@@ -1,42 +1,56 @@
-import type { AppConfig } from '@nuxt/schema';
-import type { ComponentConfig, Pagination, PaginationQueryRaw } from '../types';
-import type { ResetValue } from './ButtonClear.vue';
-import theme from '#build/cms/autocomplete-select';
-type AutocompleteSelect = ComponentConfig<typeof theme, AppConfig, 'autocompleteSelect'>;
+import type { InputMenuItem } from '@nuxt/ui';
+import type { Pagination, PaginationQueryRaw } from '../types';
 type PaginationQuery = Required<PaginationQueryRaw>;
-type HandlerQuery = PaginationQuery & {
+export type AutocompleteSelectItem = Extract<InputMenuItem, object> & {
+    id?: string | number;
+    name?: string;
+};
+type GetModelValue<T extends AutocompleteSelectItem, VK extends keyof T, M extends boolean> = M extends true ? (T[VK][] | undefined) : (T[VK] | undefined);
+export type HandlerParams = PaginationQuery & {
     search: string;
+    ids?: string[] | number[];
 };
-export interface AutocompleteSelectProps<T extends object, M extends boolean = true> {
-    modelValue: M extends true ? (string | number)[] : (string | number | null | undefined);
+export type Handler<T extends AutocompleteSelectItem = AutocompleteSelectItem> = (params: HandlerParams, signal?: AbortSignal) => Promise<{
+    items: T[];
+    pagination: Pagination;
+}>;
+export interface Props<T extends AutocompleteSelectItem = AutocompleteSelectItem, VK extends keyof T = 'id', M extends boolean = false> {
+    modelValue?: GetModelValue<T, VK, M>;
     cacheKey: string;
-    handler: (query: HandlerQuery, signal?: AbortSignal) => Promise<{
-        items: T[];
-        pagination: Pagination;
-    }>;
-    valueKey?: keyof T;
+    handler: Handler<T>;
+    /** @defaultValue 'id' */
+    valueKey?: VK;
+    /** @defaultValue 'name' */
     labelKey?: keyof T;
-    multiple?: M;
+    multiple?: M & boolean;
     placeholder?: string;
-    resetValue?: ResetValue;
-    class?: any;
-    ui?: AutocompleteSelect['slots'];
+    initSelected?: boolean;
+}
+export interface Emits<T extends AutocompleteSelectItem = AutocompleteSelectItem, VK extends keyof T = 'id', M extends boolean = false> {
+    'update:modelValue': [payload: GetModelValue<T, VK, M>];
 }
-export interface AutocompleteSelectEmits {
-    'update:modelValue': [string[]];
+export interface Slots<T extends AutocompleteSelectItem = AutocompleteSelectItem> {
+    'item-label': (props: {
+        item: T;
+    }) => any;
 }
-declare const _default: <T extends object, M extends boolean = true>(__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"?: ((args_0: string[]) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & AutocompleteSelectProps<T, M> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends AutocompleteSelectItem, VK extends keyof T = "id", 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<Props<T, VK, M> & {
+        "onUpdate:modelValue"?: ((payload: GetModelValue<T, VK, M>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
-    slots: {};
-    emit: (evt: "update:modelValue", args_0: string[]) => void;
+    slots: Slots<T>;
+    emit: (evt: "update:modelValue", payload: GetModelValue<T, VK, M>) => void;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+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/{ButtonDelete.vue.d.ts → ButtonDeleteConfirm.d.vue.ts}

@@ -3,7 +3,7 @@ import type { ButtonProps, ModalProps } from '@nuxt/ui';
 import type { ComponentProps } from 'vue-component-type-helpers';
 import type { ComponentConfig } from '../types';
 import type { ModalConfirmEmits, ModalConfirmProps } from './ModalConfirm.vue';
-import theme from '#build/cms/button-delete';
+import theme from '#build/cms/button-delete-confirm';
 import ModalConfirm from './ModalConfirm.vue';
 type ButtonDelete = ComponentConfig<typeof theme, AppConfig, 'buttonDelete'>;
 export interface ButtonDeleteProps extends Pick<ModalConfirmProps, 'onConfirm'> {
@@ -22,7 +22,9 @@ export interface ButtonDeleteProps extends Pick<ModalConfirmProps, 'onConfirm'>
 }
 export interface ButtonDeleteEmits extends ModalConfirmEmits {
 }
-declare const _default: import("vue").DefineComponent<ButtonDeleteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ButtonDeleteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
     confirm: () => any;
 }, string, import("vue").PublicProps, Readonly<ButtonDeleteProps> & Readonly<{
@@ -32,4 +34,3 @@ declare const _default: import("vue").DefineComponent<ButtonDeleteProps, {}, {},
     color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
     confirmLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/runtime/components/{ButtonDelete.vue → ButtonDeleteConfirm.vue}

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import theme from "#build/cms/button-delete";
+import theme from "#build/cms/button-delete-confirm";
 import { computed, useAppConfig, useOverlay } from "#imports";
 import { tv } from "../tv";
 import ModalConfirm from "./ModalConfirm.vue";

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

@@ -0,0 +1,36 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps, ModalProps } from '@nuxt/ui';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import type { ComponentConfig } from '../types';
+import type { ModalConfirmEmits, ModalConfirmProps } from './ModalConfirm.vue';
+import theme from '#build/cms/button-delete-confirm';
+import ModalConfirm from './ModalConfirm.vue';
+type ButtonDelete = ComponentConfig<typeof theme, AppConfig, 'buttonDelete'>;
+export interface ButtonDeleteProps extends Pick<ModalConfirmProps, 'onConfirm'> {
+    modalProps?: Omit<ModalProps & ComponentProps<typeof ModalConfirm>, 'title' | 'message' | 'onConfirm' | 'confirmButton'>;
+    confirmText?: string;
+    confirmLabel?: string;
+    title?: string;
+    message?: string;
+    tooltipText?: string;
+    color?: ButtonProps['color'];
+    variant?: ButtonProps['variant'];
+    icon?: ButtonProps['icon'];
+    size?: ButtonProps['size'];
+    class?: any;
+    ui?: ButtonDelete['slots'];
+}
+export interface ButtonDeleteEmits extends ModalConfirmEmits {
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<ButtonDeleteProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    confirm: () => any;
+}, string, import("vue").PublicProps, Readonly<ButtonDeleteProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onConfirm?: (() => any) | undefined;
+}>, {
+    color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
+    confirmLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -0,0 +1,43 @@
+import type { DateValue } from '@internationalized/date';
+import type { CalendarProps } from '@nuxt/ui';
+import type { DateRange as CalendarDateRange } from 'reka-ui';
+import type { DateRange, DateType } from '../types';
+export type CalendarValue = DateValue | CalendarDateRange;
+export type ModelValue<R extends boolean> = (R extends true ? DateRange : DateType) | undefined;
+export interface Props<R extends boolean> extends Omit<CalendarProps<R, false>, 'modelValue' | 'multiple' | 'minValue' | 'maxValue'> {
+    modelValue: ModelValue<R>;
+    id?: string;
+    name?: string;
+    withTime?: boolean;
+    minValue?: DateType;
+    maxValue?: DateType;
+}
+export interface Emits<R extends boolean> {
+    'update:modelValue': [value: ModelValue<R>];
+    'change': [event: Event];
+    'blur': [event: FocusEvent];
+    'focus': [event: FocusEvent];
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <R 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<Props<R> & {
+        onBlur?: ((event: FocusEvent) => any) | undefined;
+        onChange?: ((event: Event) => any) | undefined;
+        onFocus?: ((event: FocusEvent) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: ModelValue<R>) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "focus", event: FocusEvent) => void) & ((evt: "update:modelValue", value: ModelValue<R>) => 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];
+}) & {};