@hywax/cms 0.0.4 → 0.0.5

package/.nuxt/cms/autocomplete-select.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": ""
+  }
+}

package/.nuxt/cms/button-copy.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": ""
+  }
+}

package/.nuxt/cms/button-delete.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": ""
+  }
+}

package/.nuxt/cms/form-panel-aside-section.ts

@@ -0,0 +1,9 @@
+export default {
+  "slots": {
+    "root": "",
+    "header": "flex items-center gap-2 mb-2",
+    "icon": "size-5",
+    "title": "break-words text-sm font-semibold",
+    "body": ""
+  }
+}

package/.nuxt/cms/form-panel-section.ts

@@ -0,0 +1,8 @@
+export default {
+  "slots": {
+    "root": "",
+    "title": "text-base text-pretty font-semibold text-highlighted",
+    "description": "text-[15px] text-pretty text-muted mt-1",
+    "body": "relative rounded-lg bg-elevated/50 ring ring-default grid gap-x-8 gap-y-4 p-4 sm:p-6 mt-4"
+  }
+}

package/.nuxt/cms/form-panel.ts

@@ -0,0 +1,15 @@
+export default {
+  "slots": {
+    "root": "",
+    "form": "flex flex-1 flex-row",
+    "body": "flex-1 overflow-y-auto w-full lg:max-w-2xl mx-auto p-4 sm:p-6",
+    "sidebar": "flex-1 overflow-y-auto border-l border-default w-full max-w-xs p-4 sm:p-4"
+  },
+  "variants": {
+    "asideDivide": {
+      "true": {
+        "sidebar": "*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px *:not-last:relative *:not-last:pb-4 flex flex-col gap-4"
+      }
+    }
+  }
+}

package/.nuxt/cms/index.ts

@@ -1,2 +1,18 @@
+export { default as autocompleteSelect } from './autocomplete-select'
 export { default as buttonClear } from './button-clear'
+export { default as buttonCopy } from './button-copy'
+export { default as buttonDelete } from './button-delete'
+export { default as formPanel } from './form-panel'
+export { default as formPanelAsideSection } from './form-panel-aside-section'
+export { default as formPanelSection } from './form-panel-section'
+export { default as inputSeo } from './input-seo'
+export { default as inputSlug } from './input-slug'
+export { default as modalConfirm } from './modal-confirm'
+export { default as tableCellPreview } from './table-cell-preview'
+export { default as tableCellSeo } from './table-cell-seo'
+export { default as tableCellUser } from './table-cell-user'
+export { default as tablePanel } from './table-panel'
+export { default as tablePanelColumnSorting } from './table-panel-column-sorting'
+export { default as tablePanelColumnVisibility } from './table-panel-column-visibility'
+export { default as tablePanelFilters } from './table-panel-filters'
 export { default as uploraImage } from './uplora-image'

package/.nuxt/cms/input-seo.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": "flex flex-col gap-4"
+  }
+}

package/.nuxt/cms/input-slug.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": "flex flex-col gap-4"
+  }
+}

package/.nuxt/cms/modal-confirm.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": ""
+  }
+}

package/.nuxt/cms/table-cell-preview.ts

@@ -0,0 +1,9 @@
+export default {
+  "slots": {
+    "root": "flex items-center gap-2",
+    "image": "bg-elevated size-7 rounded-md",
+    "container": "text-xs",
+    "title": "font-medium text-default",
+    "description": "text-muted truncate max-w-40"
+  }
+}

package/.nuxt/cms/table-cell-seo.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": "flex gap-2"
+  }
+}

package/.nuxt/cms/table-cell-user.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": ""
+  }
+}

package/.nuxt/cms/table-panel-column-sorting.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": ""
+  }
+}

package/.nuxt/cms/table-panel-column-visibility.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": ""
+  }
+}

package/.nuxt/cms/table-panel-filters.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "root": ""
+  }
+}

package/.nuxt/cms/table-panel.ts

@@ -0,0 +1,8 @@
+export default {
+  "slots": {
+    "root": "",
+    "table": "",
+    "loader": "absolute z-10 inset-0 left-0 bg-default/90 flex items-center justify-center",
+    "loaderIcon": "animate-spin size-6"
+  }
+}

package/cli/templates.mjs

@@ -23,7 +23,7 @@ import { computed, useAppConfig } from '#imports'
 import { Primitive } from 'reka-ui'
 import { tv } from '${prose ? '../../utils/tv' : '../utils/tv'}'
 
-type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}>
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, '${camelName}'>
 
 export interface ${upperName}Props {
   as?: any
@@ -62,13 +62,14 @@ function test({ name, prose }) {
       ? undefined
       : `
 import type { ${upperName}Props, ${upperName}Slots } from '../../../src/runtime/components/${upperName}.vue'
-import { describe, it, expect } from 'vitest'
+import { describe, expect, it } from 'vitest'
 import ${upperName} from '../../../src/runtime/components/${upperName}.vue'
 import ComponentRender from '../../component-render'
 
 describe('${upperName}', () => {
   it.each([
     // Props
+    ['базовый компонент', { props: {} }],
     ['с алиасом', { props: { as: 'section' } }],
     ['с class', { props: { class: '' } }],
     ['с ui', { props: { ui: {} } }],

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@hywax/cms",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "configKey": "cms",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -5,7 +5,7 @@ import { dirname } from 'pathe';
 import { snakeCase, kebabCase } from 'scule';
 
 const name = "@hywax/cms";
-const version = "0.0.4";
+const version = "0.0.5";
 
 function createContext(options, nuxt) {
   const { resolve } = createResolver(import.meta.url);
@@ -64,19 +64,147 @@ function prepareAutoImports({ resolve, options, nuxt }) {
   });
   addImportsDir(resolve("./runtime/composables"));
   addPlugin(resolve("./runtime/plugins/api.ts"));
-  addImports(httpCodesImports);
-  addServerImports(httpCodesImports);
+  addImports([
+    ...httpCodesImports,
+    { name: "docToMarkdown", from: resolve("./runtime/editor/markdown") },
+    { name: "markdownToDoc", from: resolve("./runtime/editor/markdown") }
+  ]);
+  addServerImports([
+    ...httpCodesImports,
+    { name: "docToMarkdown", from: resolve("./runtime/editor/markdown") },
+    { name: "markdownToDoc", from: resolve("./runtime/editor/markdown") }
+  ]);
   addServerImportsDir(resolve("./runtime/server/utils"));
   nuxt.options.nitro.alias ||= {};
   nuxt.options.nitro.alias["#cms/http-codes"] = httpCodesPath;
 }
 
+const autocompleteSelect = {
+  slots: {
+    root: ""
+  }
+};
+
 const buttonClear = {
   slots: {
     base: "p-0"
   }
 };
 
+const buttonCopy = {
+  slots: {
+    root: ""
+  }
+};
+
+const buttonDelete = {
+  slots: {
+    root: ""
+  }
+};
+
+const formPanel = {
+  slots: {
+    root: "",
+    form: "flex flex-1 flex-row",
+    body: "flex-1 overflow-y-auto w-full lg:max-w-2xl mx-auto p-4 sm:p-6",
+    sidebar: "flex-1 overflow-y-auto border-l border-default w-full max-w-xs p-4 sm:p-4"
+  },
+  variants: {
+    asideDivide: {
+      true: {
+        sidebar: "*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px *:not-last:relative *:not-last:pb-4 flex flex-col gap-4"
+      }
+    }
+  }
+};
+
+const formPanelAsideSection = {
+  slots: {
+    root: "",
+    header: "flex items-center gap-2 mb-2",
+    icon: "size-5",
+    title: "break-words text-sm font-semibold",
+    body: ""
+  }
+};
+
+const formPanelSection = {
+  slots: {
+    root: "",
+    title: "text-base text-pretty font-semibold text-highlighted",
+    description: "text-[15px] text-pretty text-muted mt-1",
+    body: "relative rounded-lg bg-elevated/50 ring ring-default grid gap-x-8 gap-y-4 p-4 sm:p-6 mt-4"
+  }
+};
+
+const inputSeo = {
+  slots: {
+    root: "flex flex-col gap-4"
+  }
+};
+
+const inputSlug = {
+  slots: {
+    root: "flex flex-col gap-4"
+  }
+};
+
+const modalConfirm = {
+  slots: {
+    root: ""
+  }
+};
+
+const tableCellPreview = {
+  slots: {
+    root: "flex items-center gap-2",
+    image: "bg-elevated size-7 rounded-md",
+    container: "text-xs",
+    title: "font-medium text-default",
+    description: "text-muted truncate max-w-40"
+  }
+};
+
+const tableCellSeo = {
+  slots: {
+    root: "flex gap-2"
+  }
+};
+
+const tableCellUser = {
+  slots: {
+    root: ""
+  }
+};
+
+const tablePanel = {
+  slots: {
+    root: "",
+    table: "",
+    loader: "absolute z-10 inset-0 left-0 bg-default/90 flex items-center justify-center",
+    loaderIcon: "animate-spin size-6"
+  }
+};
+
+const tablePanelColumnSorting = {
+  slots: {
+    root: ""
+  }
+};
+
+const tablePanelColumnVisibility = {
+  slots: {
+    root: ""
+  }
+};
+
+const tablePanelFilters = {
+  slots: {
+    root: ""
+  }
+};
+
 const uploraImage$1 = {
   slots: {
     root: "relative grid grid-cols-[100%] grid-rows-[100%] overflow-hidden",
@@ -88,7 +216,23 @@ const uploraImage$1 = {
 
 const theme = {
   __proto__: null,
+  autocompleteSelect: autocompleteSelect,
   buttonClear: buttonClear,
+  buttonCopy: buttonCopy,
+  buttonDelete: buttonDelete,
+  formPanel: formPanel,
+  formPanelAsideSection: formPanelAsideSection,
+  formPanelSection: formPanelSection,
+  inputSeo: inputSeo,
+  inputSlug: inputSlug,
+  modalConfirm: modalConfirm,
+  tableCellPreview: tableCellPreview,
+  tableCellSeo: tableCellSeo,
+  tableCellUser: tableCellUser,
+  tablePanel: tablePanel,
+  tablePanelColumnSorting: tablePanelColumnSorting,
+  tablePanelColumnVisibility: tablePanelColumnVisibility,
+  tablePanelFilters: tablePanelFilters,
   uploraImage: uploraImage$1
 };
 
@@ -215,7 +359,13 @@ function prepareTemplates(context) {
   }
 }
 
-const icons = {};
+const icons = {
+  sortAsc: "lucide:arrow-up-wide-narrow",
+  sortDesc: "lucide:arrow-down-wide-narrow",
+  columns: "lucide:columns-3-cog",
+  filter: "lucide:filter",
+  link: "lucide:link-2"
+};
 
 const module = defineNuxtModule({
   meta: {

package/dist/runtime/components/AutocompleteSelect.vue

@@ -0,0 +1,170 @@
+<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"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template v-if="modelValue && !props.multiple">
+      <span class="truncate pointer-events-none">
+        {{ getCachedLabel(modelValue) }}
+      </span>
+    </template>
+
+    <template v-if="!multiple" #trailing>
+      <ButtonClear
+        :model-value="modelValue"
+        :reset-value="resetValue"
+        @update:model-value="$emit('update:modelValue', $event)"
+      />
+    </template>
+  </USelectMenu>
+</template>
+
+<script>
+import theme from "#build/cms/autocomplete-select";
+import { computed, ref, refDebounced, shallowRef, toRaw, triggerRef, useAppConfig, useAsyncData, useId, useNuxtData, watch } from "#imports";
+import { useInfiniteScroll, useOffsetPagination } from "@vueuse/core";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  modelValue: { type: null, required: true },
+  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 },
+  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 }
+});
+const emit = defineEmits(["update:modelValue"]);
+const appConfig = useAppConfig();
+const autocompleteSelectId = `autocomplete-select-${useId()}`;
+const { initialPagination, initialData, initialStatus } = useInitialData();
+const { fetchPage, nextPage, isLastPage, pageDataStatus, allPagesData } = usePageData({
+  pagination: initialPagination,
+  total: () => initialData.value?.pagination.total ?? 0
+});
+const { searchTerm, searchData, searchStatus } = useSearch({ pagination: initialPagination });
+const { isOpen } = useInfiniteScrollData({ nextPage, isLastPage, fetchPage, searchTerm });
+const isLoading = computed(() => [
+  initialStatus.value,
+  pageDataStatus.value,
+  searchStatus.value
+].includes("pending"));
+const items = computed(() => {
+  if (searchTerm.value) {
+    return searchData.value?.items ?? [];
+  }
+  return [
+    ...initialData.value?.items ?? [],
+    ...allPagesData.value
+  ];
+});
+const { getCachedLabel } = useAutocompleteCache({ items });
+function useInitialData() {
+  const initialPagination2 = { page: "1", perPage: "25" };
+  const { data: initialData2, status: initialStatus2 } = useAsyncData(
+    `autocomplete-select:${props.cacheKey}`,
+    () => props.handler({ ...initialPagination2, search: "" }),
+    {
+      lazy: true,
+      getCachedData: (key) => useNuxtData(key).data.value ?? void 0,
+      dedupe: "defer"
+    }
+  );
+  return {
+    initialPagination: initialPagination2,
+    initialData: initialData2,
+    initialStatus: initialStatus2
+  };
+}
+function usePageData(options) {
+  const { currentPage, currentPageSize, next, isLastPage: isLastPage2 } = useOffsetPagination({
+    total: options.total,
+    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 allPagesData2 = shallowRef([]);
+  watch(pageData, (value) => {
+    if (value?.items) {
+      allPagesData2.value.push(...value.items);
+      triggerRef(allPagesData2);
+    }
+  });
+  return { fetchPage: fetchPage2, pageData, nextPage: next, isLastPage: isLastPage2, pageDataStatus: pageDataStatus2, allPagesData: allPagesData2 };
+}
+function useInfiniteScrollData(options) {
+  const isOpen2 = ref(false);
+  const contentDiv = ref(null);
+  watch(isOpen2, (value) => {
+    if (value) {
+      contentDiv.value = document.querySelector(`
+          [data-autocomplete-select-content="${autocompleteSelectId}"] [data-reka-combobox-viewport]
+        `) ?? null;
+    }
+  }, { flush: "post" });
+  useInfiniteScroll(contentDiv, () => {
+    options.nextPage();
+    return fetchPage();
+  }, { distance: 10, canLoadMore: () => !searchTerm.value && !isLastPage.value });
+  return { isOpen: isOpen2 };
+}
+function useSearch(options) {
+  const searchTerm2 = ref("");
+  const searchTermDebounced = refDebounced(searchTerm2, 500);
+  let controller;
+  const { data: searchData2, status: searchStatus2, execute: search } = useAsyncData(() => {
+    controller?.abort();
+    controller = new AbortController();
+    return props.handler({
+      ...options.pagination,
+      search: searchTermDebounced.value
+    }, controller.signal);
+  }, { lazy: true, immediate: false });
+  watch(searchTermDebounced, (value) => {
+    value && search();
+  });
+  return { searchData: searchData2, searchStatus: searchStatus2, searchTerm: searchTerm2 };
+}
+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)));
+      }
+    });
+    cacheSize !== selectedItemCache.value.size && triggerRef(selectedItemCache);
+  }, { immediate: true });
+  const getCachedLabel2 = (value) => {
+    return selectedItemCache.value.get(value)?.[props.labelKey] ?? value;
+  };
+  return { selectedItemCache, getCachedLabel: getCachedLabel2 };
+}
+const _ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.autocompleteSelect || {} })());
+</script>

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

@@ -0,0 +1,42 @@
+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'>;
+type PaginationQuery = Required<PaginationQueryRaw>;
+type HandlerQuery = PaginationQuery & {
+    search: string;
+};
+export interface AutocompleteSelectProps<T extends object, M extends boolean = true> {
+    modelValue: M extends true ? (string | number)[] : (string | number | null | undefined);
+    cacheKey: string;
+    handler: (query: HandlerQuery, signal?: AbortSignal) => Promise<{
+        items: T[];
+        pagination: Pagination;
+    }>;
+    valueKey?: keyof T;
+    labelKey?: keyof T;
+    multiple?: M;
+    placeholder?: string;
+    resetValue?: ResetValue;
+    class?: any;
+    ui?: AutocompleteSelect['slots'];
+}
+export interface AutocompleteSelectEmits {
+    'update:modelValue': [string[]];
+}
+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;
+    attrs: any;
+    slots: {};
+    emit: (evt: "update:modelValue", args_0: string[]) => 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/ButtonCopy.vue

@@ -0,0 +1,40 @@
+<template>
+  <UTooltip
+    :text="tooltipText"
+    :content="{ side: 'top' }"
+    disable-hoverable-content
+    disable-closing-trigger
+  >
+    <UButton
+      :icon="copied ? appConfig.ui.icons.copyCheck : appConfig.ui.icons.copy"
+      :color="color"
+      :variant="variant"
+      :size="size"
+      :class="ui.root({ class: [props.ui?.root, props.class] })"
+      @click="copy(value)"
+    />
+  </UTooltip>
+</template>
+
+<script>
+import theme from "#build/cms/button-copy";
+import { computed, useAppConfig, useClipboard } from "#imports";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  label: { type: String, required: false, default: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C" },
+  copiedLabel: { type: String, required: false, default: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E" },
+  value: { type: String, required: true },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "link" },
+  size: { type: null, required: false, default: "sm" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const appConfig = useAppConfig();
+const { copy, copied } = useClipboard();
+const tooltipText = computed(() => copied.value ? props.copiedLabel : props.label);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.buttonCopy || {} })());
+</script>

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

@@ -0,0 +1,23 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps } from '@nuxt/ui';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/button-copy';
+type ButtonCopy = ComponentConfig<typeof theme, AppConfig, 'buttonCopy'>;
+export interface ButtonCopyProps {
+    label?: string;
+    copiedLabel?: string;
+    value: string;
+    color?: ButtonProps['color'];
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+    class?: any;
+    ui?: ButtonCopy['slots'];
+}
+declare const _default: import("vue").DefineComponent<ButtonCopyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonCopyProps> & Readonly<{}>, {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
+    variant: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link";
+    label: string;
+    copiedLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;