@shwfed/nuxt 0.1.16 → 0.1.18

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -18,7 +18,6 @@ const module$1 = defineNuxtModule({
       prefix: "shwfed",
       extensions: ["vue"]
     });
-    nuxt.options.typescript.tsConfig.include?.push(resolver.resolve("runtime/types/directive.d.ts"));
   }
 });
 

package/dist/runtime/components/app.vue

@@ -1,5 +1,13 @@
 <script setup>
+import { useHead } from "#app";
 import { Tooltip } from "reka-ui/namespaced";
+useHead({
+  bodyAttrs: {
+    style: {
+      "--primary": "#2DA8BC"
+    }
+  }
+});
 </script>
 
 <template>

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

@@ -1,5 +1,10 @@
 import type { RowData, TableOptions } from '@tanstack/vue-table';
 export type Expression = string;
+export type Markdown = string;
+export type Render = string | Readonly<{
+    id: string;
+    props: unknown;
+}>;
 export type Accessor = string | Readonly<{
     read: Expression;
     write: Expression;
@@ -9,10 +14,7 @@ export type Column = Readonly<{
     title?: string;
     accessor?: Accessor;
     accessorKey?: string;
-    renderer?: string | Readonly<{
-        id: string;
-        props: unknown;
-    }>;
+    renderer?: Render;
     tooltip?: string;
     size?: number;
     enableSorting?: boolean;
@@ -40,6 +42,8 @@ declare const __VLS_export: import("vue").DefineComponent<Readonly<{
     data: Array<unknown>;
     cellStyles?: Expression;
     props?: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+    paginationLeft?: Markdown;
+    paginationRight?: Markdown;
 }>, import("@tanstack/vue-table").Table<unknown>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Readonly<{
     id: string;
     getRowId?: Expression;
@@ -50,6 +54,8 @@ declare const __VLS_export: import("vue").DefineComponent<Readonly<{
     data: Array<unknown>;
     cellStyles?: Expression;
     props?: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+    paginationLeft?: Markdown;
+    paginationRight?: Markdown;
 }>> & Readonly<{}>, {
     readonly props: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
     readonly getRowId: Expression;

package/dist/runtime/components/table.vue

@@ -6,7 +6,6 @@ import { getProperty } from "dot-prop";
 import { Pagination } from "reka-ui/namespaced";
 import { computed, ref } from "vue";
 import { useNuxtApp } from "#app";
-import { useCheating } from "../composables/useCheating";
 import { useTableRenderers } from "../composables/useTableRenderers";
 import Tooltip from "./tooltip.vue";
 </script>
@@ -21,15 +20,13 @@ const props = defineProps({
   columns: { type: Array, required: true },
   data: { type: Array, required: true },
   cellStyles: { type: String, required: false, default: void 0 },
-  props: { type: Object, required: false, default: void 0 }
+  props: { type: Object, required: false, default: void 0 },
+  paginationLeft: { type: String, required: false },
+  paginationRight: { type: String, required: false }
 });
-const isCheating = useCheating();
-const { $dsl, $markdown } = useNuxtApp();
+const { $dsl } = useNuxtApp();
 const { resolveTableRenderer } = useTableRenderers();
 const containerRef = ref(null);
-function renderInline(source) {
-  return $markdown.renderInline(source);
-}
 function genColumnId(column) {
   if (typeof column.accessor === "string") {
     return column.accessor;
@@ -39,29 +36,10 @@ function genColumnId(column) {
   return crypto.randomUUID();
 }
 function translate(column) {
-  const rendererId = typeof column.renderer === "string" ? column.renderer : column.renderer?.id ? column.renderer.id : "table.renderer.text";
-  const rendererProps = column.renderer && typeof column.renderer === "object" && "props" in column.renderer ? column.renderer.props : null;
-  const renderer = resolveTableRenderer(rendererId);
-  const options = renderer.parseOptions(rendererProps);
-  const helpers = {
-    renderInline,
-    evaluate: $dsl.evaluate
-  };
-  const header = (ctx) => {
-    if (renderer.header) {
-      return renderer.header({
-        ctx,
-        title: typeof column.title === "string" ? column.title : void 0,
-        options,
-        helpers
-      });
-    }
-    return typeof column.title === "string" ? column.title : void 0;
-  };
   if (Array.isArray(column.columns) && column.columns.length > 0) {
     return {
       id: column.id ?? genColumnId(column),
-      header,
+      header: column.title,
       columns: column.columns?.map((column2) => translate(column2)) ?? [],
       enableSorting: column.enableSorting ?? false,
       enableMultiSort: column.enableMultiSorting,
@@ -73,13 +51,14 @@ function translate(column) {
       }
     };
   }
-  const cell = (ctx) => {
-    return renderer.cell({ ctx, options, helpers });
-  };
+  const renderer = resolveTableRenderer(typeof column.renderer === "string" ? column.renderer : column.renderer?.id ? column.renderer.id : "table.renderer.text");
+  const options = renderer.parseOptions(column.renderer && typeof column.renderer === "object" && "props" in column.renderer ? column.renderer.props : null);
   return {
     id: column.id ?? genColumnId(column),
-    header,
-    cell,
+    header: (ctx) => renderer.header?.({ ctx, options }) ?? column.title,
+    cell: (ctx) => {
+      return renderer.cell({ ctx, options });
+    },
     accessorFn: (row, index) => {
       const key = column.accessorKey ? column.accessorKey : column.accessor;
       if (typeof key === "string") {
@@ -224,15 +203,24 @@ function getCellStyles(ctx) {
     return {};
   }
 }
-function hasAdjacentColumns(column) {
+function shouldHaveRightBorder(column) {
   switch (column.getIsPinned()) {
     case "left":
-      return !column.getIsLastColumn("left");
-    // why would anyone pin all columns to the left?
+      return true;
     case "right":
       return !column.getIsLastColumn("right");
     case false:
-      return !column.getIsLastColumn("center") || table.getIsSomeColumnsPinned("right");
+      return !column.getIsLastColumn("center");
+  }
+}
+function shouldHaveLeftBorder(column) {
+  switch (column.getIsPinned()) {
+    case "left":
+      return false;
+    case "right":
+      return true;
+    case false:
+      return false;
   }
 }
 function pinnedStyle(column) {
@@ -263,11 +251,10 @@ function getSortIcon(column) {
 <template>
   <div
     class="flex flex-col h-full"
-    :style="isCheating ? { '--primary': '#BC1111' } : { '--primary': '#2DA8BC' }"
   >
     <div
       ref="containerRef"
-      class="overflow-scroll flex-1 border border-zinc-200 rounded relative"
+      class="overflow-scroll overscroll-none flex-1 border border-zinc-200 rounded relative"
     >
       <div :style="{ height: `${rowTotalSize}px` }">
         <table class="grid">
@@ -287,7 +274,8 @@ function getSortIcon(column) {
   'text-xs flex items-center justify-center relative',
   'bg-[color-mix(in_srgb,var(--primary)_10%,white)] group',
   header.column.getIsPinned() && 'sticky z-15',
-  (header.column.getIsPinned() === 'left' || hasAdjacentColumns(header.column)) && 'border-r'
+  shouldHaveRightBorder(header.column) && 'border-r',
+  shouldHaveLeftBorder(header.column) && 'border-l'
 ]"
                 :style="{
   width: `${header.getSize()}px`,
@@ -303,7 +291,7 @@ function getSortIcon(column) {
                 <Tooltip
                   v-if="!header.isPlaceholder && header.column.columnDef.meta?.tooltip"
                   :delay-duration="180"
-                  :content="renderInline(header.column.columnDef.meta.tooltip)"
+                  :content="$md.inline`${header.column.columnDef.meta.tooltip}`"
                 >
                   <Icon icon="fluent:info-20-regular" />
                 </Tooltip>
@@ -354,7 +342,7 @@ function getSortIcon(column) {
               v-for="r in rowWindow"
               :key="rows[r.index]?.id ?? r.index"
               :ref="measureRow"
-              class="flex absolute w-full"
+              class="flex absolute w-full not-last:border-b border-zinc-300"
               :data-index="rows[r.index]?.index"
               :style="{ transform: `translate3d(0, ${r.start}px, 0)` }"
             >
@@ -362,10 +350,11 @@ function getSortIcon(column) {
                 v-for="cell in rows[r.index]?.getVisibleCells() ?? []"
                 :key="cell.id"
                 :class="[
-  'border-b border-zinc-300',
+  'border-zinc-300',
   cell.column.columnDef.meta?.grow && 'flex-1',
   cell.column.getIsPinned() && 'sticky z-15',
-  (cell.column.getIsPinned() === 'left' || hasAdjacentColumns(cell.column)) && 'border-r'
+  shouldHaveRightBorder(cell.column) && 'border-r',
+  shouldHaveLeftBorder(cell.column) && 'border-l'
 ]"
                 :style="{
   width: `${cell.column.getSize()}px`,
@@ -380,12 +369,47 @@ function getSortIcon(column) {
               </td>
             </tr>
           </tbody>
+
+          <tfoot class="hidden has-[[data-footer]]:grid sticky bottom-0 z-10 select-none border-t border-zinc-200">
+            <tr
+              v-for="group in table.getFooterGroups()"
+              :key="group.id"
+              class="flex w-full border-zinc-200"
+            >
+              <th
+                v-for="header in group.headers"
+                :key="header.id"
+                :colSpan="header.colSpan"
+                :class="[
+  header.column.columnDef.meta?.grow && 'flex-1',
+  'flex items-center gap-2 border-zinc-300 text-zinc-600 p-0',
+  'text-xs flex items-center justify-center relative',
+  'bg-[color-mix(in_srgb,var(--primary)_10%,white)] group',
+  header.column.getIsPinned() && 'sticky z-15',
+  shouldHaveRightBorder(header.column) && 'border-r',
+  shouldHaveLeftBorder(header.column) && 'border-l'
+]"
+                :style="{
+  width: `${header.getSize()}px`,
+  ...pinnedStyle(header.column)
+}"
+              >
+                <FlexRender
+                  v-if="!header.isPlaceholder"
+                  :render="header.column.columnDef.footer"
+                  :props="header.getContext()"
+                />
+              </th>
+            </tr>
+          </tfoot>
         </table>
       </div>
     </div>
 
     <div class="flex items-center justify-between w-full p-4 text-sm text-zinc-600">
-      <div />
+      <div>
+        <div />
+      </div>
       <div class="flex items-center gap-4">
         <span class="text-xs">{{ `\u5171 ${props.data.length} \u6761` }}</span>
         <Pagination.Root

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

@@ -1,5 +1,10 @@
 import type { RowData, TableOptions } from '@tanstack/vue-table';
 export type Expression = string;
+export type Markdown = string;
+export type Render = string | Readonly<{
+    id: string;
+    props: unknown;
+}>;
 export type Accessor = string | Readonly<{
     read: Expression;
     write: Expression;
@@ -9,10 +14,7 @@ export type Column = Readonly<{
     title?: string;
     accessor?: Accessor;
     accessorKey?: string;
-    renderer?: string | Readonly<{
-        id: string;
-        props: unknown;
-    }>;
+    renderer?: Render;
     tooltip?: string;
     size?: number;
     enableSorting?: boolean;
@@ -40,6 +42,8 @@ declare const __VLS_export: import("vue").DefineComponent<Readonly<{
     data: Array<unknown>;
     cellStyles?: Expression;
     props?: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+    paginationLeft?: Markdown;
+    paginationRight?: Markdown;
 }>, import("@tanstack/vue-table").Table<unknown>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Readonly<{
     id: string;
     getRowId?: Expression;
@@ -50,6 +54,8 @@ declare const __VLS_export: import("vue").DefineComponent<Readonly<{
     data: Array<unknown>;
     cellStyles?: Expression;
     props?: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
+    paginationLeft?: Markdown;
+    paginationRight?: Markdown;
 }>> & Readonly<{}>, {
     readonly props: Omit<TableOptions<unknown>, "columns" | "data" | "getRowId" | "getCoreRowModel">;
     readonly getRowId: Expression;

package/dist/runtime/composables/useTableRenderers.d.ts

@@ -1,7 +1,7 @@
 import '../table-renderers/builtins.js';
 import { getTableRenderer, resolveTableRenderer } from '../table-renderers/registry.js';
 export { defineTableRenderer } from '../table-renderers/registry.js';
-export type { TableRenderer, TableRendererCellArgs, TableRendererColumnDefOverrides, TableRendererConfigComponent, TableRendererHeaderArgs, TableRendererId, } from '../table-renderers/registry.js';
+export type { TableRenderer, TableRendererCellArgs, TableRendererColumnDefOverrides, TableRendererConfigComponent, TableRendererFooterArgs, TableRendererHeaderArgs, TableRendererId, } from '../table-renderers/registry.js';
 export declare function useTableRenderers(): {
     getTableRenderer: typeof getTableRenderer;
     resolveTableRenderer: typeof resolveTableRenderer;

package/dist/runtime/plugins/cel/index.js

@@ -1,25 +1,28 @@
 import { defineNuxtPlugin } from "#app";
 import defu from "defu";
 import { createEnvironment } from "./env.js";
-export default defineNuxtPlugin(() => {
-  const env = createEnvironment();
-  return {
-    provide: {
-      dsl: {
-        check: (source) => {
-          return env.check(source);
-        },
-        /**
-         * Synchronous evaluation for render-time usage (e.g. table accessors).
-         *
-         * Will throw `TypeError` / `EvaluationError` on failure.
-         */
-        evaluate: (source, context) => {
-          return env.evaluate(source, defu(context, {
-            now: /* @__PURE__ */ new Date()
-          }));
+export default defineNuxtPlugin({
+  name: "shwfed-nuxt:cel",
+  setup: () => {
+    const env = createEnvironment();
+    return {
+      provide: {
+        dsl: {
+          check: (source) => {
+            return env.check(source);
+          },
+          /**
+           * Synchronous evaluation for render-time usage (e.g. table accessors).
+           *
+           * Will throw `TypeError` / `EvaluationError` on failure.
+           */
+          evaluate: (source, context) => {
+            return env.evaluate(source, defu(context, {
+              now: /* @__PURE__ */ new Date()
+            }));
+          }
         }
       }
-    }
-  };
+    };
+  }
 });

package/dist/runtime/plugins/markdown/index.d.ts

@@ -1,15 +1,23 @@
 import { md } from './md.js';
 declare const _default: import("#app").Plugin<{
-    md: typeof md;
-    markdown: {
-        render: (source: string) => string;
-        renderInline: (source: string) => string;
+    md: {
+        raw: typeof md;
+        inline: (template: {
+            raw: readonly string[] | ArrayLike<string>;
+        }, ...substitutions: any[]) => string;
+        block: (template: {
+            raw: readonly string[] | ArrayLike<string>;
+        }, ...substitutions: any[]) => string;
     };
 }> & import("#app").ObjectPlugin<{
-    md: typeof md;
-    markdown: {
-        render: (source: string) => string;
-        renderInline: (source: string) => string;
+    md: {
+        raw: typeof md;
+        inline: (template: {
+            raw: readonly string[] | ArrayLike<string>;
+        }, ...substitutions: any[]) => string;
+        block: (template: {
+            raw: readonly string[] | ArrayLike<string>;
+        }, ...substitutions: any[]) => string;
     };
 }>;
 export default _default;

package/dist/runtime/plugins/markdown/index.js

@@ -1,33 +1,34 @@
-import { defineNuxtPlugin } from "#app";
+import { defineNuxtPlugin, useNuxtApp } from "#app";
 import MarkdownIt from "markdown-it";
 import { md } from "./md.js";
-export default defineNuxtPlugin((app) => {
-  const engine = new MarkdownIt("commonmark", {
-    html: true
-  });
-  app.vueApp.directive("md", {
-    beforeMount(el, v) {
-      if (["inline", "inline-flex", "inline-block"].includes(getComputedStyle(el).display)) {
-        el.innerHTML = engine.renderInline(v.value);
-      } else {
-        el.innerHTML = engine.render(v.value);
-      }
-    },
-    beforeUpdate(el, v) {
-      if (["inline", "inline-flex", "inline-block"].includes(getComputedStyle(el).display)) {
-        el.innerHTML = engine.renderInline(v.value);
-      } else {
-        el.innerHTML = engine.render(v.value);
-      }
+export default defineNuxtPlugin({
+  name: "shwfed-nuxt:markdown",
+  dependsOn: ["shwfed-nuxt:cel"],
+  setup: () => {
+    const engine = new MarkdownIt("commonmark", {
+      html: true
+    });
+    const { $dsl } = useNuxtApp();
+    function evaluateBlock(source) {
+      return source.replace(/\{\{([\s\S]+?)\}\}/g, (_, expression) => {
+        if (!expression)
+          return "";
+        try {
+          return $dsl.evaluate(expression);
+        } catch (e) {
+          console.error(e);
+          return "";
+        }
+      });
     }
-  });
-  return {
-    provide: {
-      md,
-      markdown: {
-        render: (source) => engine.render(source),
-        renderInline: (source) => engine.renderInline(source)
+    return {
+      provide: {
+        md: {
+          raw: md,
+          inline: (...args) => engine.renderInline(evaluateBlock(md(...args))),
+          block: (...args) => engine.render(evaluateBlock(md(...args)))
+        }
       }
-    }
-  };
+    };
+  }
 });

package/dist/runtime/table-renderers/builtins.js

@@ -4,6 +4,7 @@ import { format as formatDate, isValid, toDate } from "date-fns";
 import { defineComponent } from "vue";
 import { z } from "zod";
 import { defineTableRenderer } from "./registry.js";
+import { useNuxtApp } from "#app";
 const JUSTIFY_CLASS = {
   left: "justify-start",
   center: "justify-center",
@@ -185,16 +186,17 @@ defineTableRenderer(
     align: z.enum(["left", "center", "right"]).default("left")
   },
   {
-    cell: ({ ctx, options, helpers }) => {
+    cell: ({ ctx, options }) => {
       const rawValue = ctx.cell.getValue();
       const isEmpty = rawValue === void 0 || rawValue === null;
       const align = isEmpty ? "center" : options.align ?? "left";
       const justifyClass = JUSTIFY_CLASS[align];
+      const { $dsl } = useNuxtApp();
       const onCopy = async () => {
         try {
           let text = String(ctx.cell.getValue());
-          if (options.copyExpression && helpers.evaluate) {
-            text = String(helpers.evaluate(options.copyExpression, {
+          if (options.copyExpression) {
+            text = String($dsl.evaluate(options.copyExpression, {
               row: ctx.row.original,
               index: BigInt(ctx.row.index)
             }));
@@ -287,7 +289,7 @@ defineTableRenderer(
             type: "checkbox",
             checked,
             class: [
-              "peer h-4 w-4 cursor-pointer transition-colors duration-180 appearance-none rounded",
+              "peer h-4 w-4 cursor-pointer transition-colors duration-180 appearance-none rounded bg-white",
               "border border-[color-mix(in_srgb,var(--primary)_10%,#00000033)] not-checked-group-hover:border-[color-mix(in_srgb,var(--primary)_20%,#00000033)]",
               "not-checked-group-hover:bg-[color-mix(in_srgb,var(--primary)_5%,#00000011)] checked:border-[var(--primary)] checked:bg-[var(--primary)]"
             ],
@@ -333,7 +335,10 @@ defineTableRenderer(
         children: /* @__PURE__ */ jsx(Icon, { icon: ctx.table.getIsAllRowsExpanded() ? "fluent:subtract-square-20-regular" : "fluent:add-square-20-regular" })
       }
     ) }),
-    config: NoOptionsConfig
+    config: NoOptionsConfig,
+    columnDefOverrides: {
+      enableResizing: false
+    }
   }
 );
 defineTableRenderer(
@@ -394,10 +399,10 @@ defineTableRenderer(
     source: z.string().optional()
   },
   {
-    cell: ({ ctx, options, helpers }) => {
+    cell: ({ ctx, options }) => {
+      const { $md } = useNuxtApp();
       const source = options.source ?? String(ctx.cell.getValue());
-      const html = helpers.renderInline(source);
-      return /* @__PURE__ */ jsx("div", { class: "relative w-full py-2 px-1 flex items-center justify-center text-xs", children: /* @__PURE__ */ jsx("span", { class: "prose prose-zinc text-xs", innerHTML: html }) });
+      return /* @__PURE__ */ jsx("div", { class: "relative w-full py-2 px-1 flex items-center justify-center text-xs", children: /* @__PURE__ */ jsx("span", { class: "prose prose-zinc text-xs", innerHTML: $md.inline`${source}` }) });
     },
     config: TableRendererMarkdownConfig
   }

package/dist/runtime/table-renderers/registry.d.ts

@@ -6,19 +6,14 @@ export type TableRendererColumnDefOverrides<TData extends RowData = unknown> = P
 export type TableRendererCellArgs<TData extends RowData, TValue, TOptions> = Readonly<{
     ctx: CellContext<TData, TValue>;
     options: TOptions;
-    helpers: Readonly<{
-        renderInline: (source: string) => string;
-        evaluate?: (source: string, context?: Record<string, unknown>) => unknown;
-    }>;
 }>;
 export type TableRendererHeaderArgs<TData extends RowData, TValue, TOptions> = Readonly<{
     ctx: HeaderContext<TData, TValue>;
-    title?: string;
     options: TOptions;
-    helpers: Readonly<{
-        renderInline: (source: string) => string;
-        evaluate?: (source: string, context?: Record<string, unknown>) => unknown;
-    }>;
+}>;
+export type TableRendererFooterArgs<TData extends RowData, TValue, TOptions> = Readonly<{
+    ctx: HeaderContext<TData, TValue>;
+    options: TOptions;
 }>;
 export type TableRendererConfigComponent<_TOptions> = unknown;
 export type TableRenderer<TOptions> = Readonly<{
@@ -27,12 +22,14 @@ export type TableRenderer<TOptions> = Readonly<{
     parseOptions: (input: unknown) => TOptions;
     cell: (args: TableRendererCellArgs<unknown, unknown, TOptions>) => VNodeChild;
     header?: (args: TableRendererHeaderArgs<unknown, unknown, TOptions>) => VNodeChild;
+    footer?: (args: TableRendererFooterArgs<unknown, unknown, TOptions>) => VNodeChild;
     config?: TableRendererConfigComponent<TOptions>;
     columnDefOverrides?: TableRendererColumnDefOverrides;
 }>;
 export declare function defineTableRenderer<const TShape extends z.ZodRawShape, const TOptions = z.infer<z.ZodObject<TShape>>>(id: TableRendererId, shape: TShape, impl: Readonly<{
     cell: TableRenderer<TOptions>['cell'];
     header?: TableRenderer<TOptions>['header'];
+    footer?: TableRenderer<TOptions>['footer'];
     config?: TableRenderer<TOptions>['config'];
     columnDefOverrides?: TableRenderer<TOptions>['columnDefOverrides'];
 }>): TableRenderer<TOptions>;

package/dist/runtime/table-renderers/registry.js

@@ -6,11 +6,12 @@ export function defineTableRenderer(id, shape, impl) {
     id,
     optionsSchema,
     parseOptions: (input) => {
-      const normalized = input == null ? {} : input;
+      const normalized = input === null || input === void 0 ? {} : input;
       return optionsSchema.parse(normalized);
     },
     cell: impl.cell,
     header: impl.header,
+    footer: impl.footer,
     config: impl.config,
     columnDefOverrides: impl.columnDefOverrides
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "description": "",
   "license": "MIT",
   "type": "module",

package/dist/runtime/types/directive.d.ts

@@ -1,9 +0,0 @@
-import type { Directive } from 'vue'
-
-export type MdDirective = Directive<HTMLElement, string>
-
-declare module 'vue' {
-  export interface ComponentCustomProperties {
-    vMd: MdDirective
-  }
-}