@shwfed/nuxt 0.1.19 → 0.1.20

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@shwfed/nuxt",
   "configKey": "shwfed",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
-    "unbuild": "unknown"
+    "unbuild": "3.6.1"
   }
 }

package/dist/module.mjs

@@ -9,8 +9,14 @@ const module$1 = defineNuxtModule({
   setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     nuxt.options.runtimeConfig.public.shwfed = options;
+    nuxt.options.css ||= [];
+    nuxt.options.css.push("vue-sonner/style.css");
     addPlugin(resolver.resolve("runtime/plugins/cel/index"));
     addPlugin(resolver.resolve("runtime/plugins/markdown/index"));
+    addPlugin({
+      src: resolver.resolve("runtime/plugins/toast/index"),
+      mode: "client"
+    });
     addImportsDir(resolver.resolve("runtime/composables"));
     addComponentsDir({
       path: resolver.resolve("runtime/components"),

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

@@ -1,6 +1,6 @@
-declare var __VLS_8: {};
+declare var __VLS_19: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/app.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { useHead } from "#app";
 import { Tooltip } from "reka-ui/namespaced";
+import { Toaster } from "vue-sonner";
 useHead({
   bodyAttrs: {
     style: {
@@ -12,6 +13,9 @@ useHead({
 
 <template>
   <Tooltip.Provider>
+    <ClientOnly>
+      <Toaster />
+    </ClientOnly>
     <slot />
   </Tooltip.Provider>
 </template>

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

@@ -1,6 +1,6 @@
-declare var __VLS_8: {};
+declare var __VLS_19: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    /**
+     * MD
+     */
+    title?: string;
+    width?: string;
+    description?: string;
+    disabled?: boolean;
+};
+type __VLS_Slots = {
+    trigger: () => void;
+    default: () => void;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/dialog.vue

@@ -0,0 +1,64 @@
+<script setup>
+import { Icon } from "@iconify/vue";
+import { Dialog } from "reka-ui/namespaced";
+defineProps({
+  title: { type: String, required: false },
+  width: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false }
+});
+defineSlots();
+</script>
+
+<template>
+  <template v-if="disabled">
+    <slot name="trigger" />
+  </template>
+  <Dialog.Root v-else>
+    <Dialog.Trigger as-child>
+      <slot name="trigger" />
+    </Dialog.Trigger>
+    <Dialog.Portal>
+      <Dialog.Overlay
+        class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-zinc-900/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      >
+        <Dialog.Content
+          class="absolute z-50 grid my-8 gap-4 border border-slate-200 bg-white p-4 shadow-lg duration-200 rounded-sm outline-none -translate-y-32 translate-3d"
+          :style="{
+  minWidth: width
+}"
+          @pointer-down-outside="(event) => {
+  const originalEvent = event.detail.originalEvent;
+  const target = originalEvent.target;
+  if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+    event.preventDefault();
+  }
+}"
+        >
+          <Dialog.Title
+            class="flex items-center justify-between"
+          >
+            <span
+              class="prose prose-zinc prose-base"
+              v-html="$md.inline`${title}`({})"
+            />
+
+            <Dialog.Close
+              class="outline-none rounded-md p-1 text-zinc-500 hover:text-zinc-800 transition-colors duration-150 bg-transparent"
+            >
+              <Icon
+                icon="fluent:dismiss-20-regular"
+              />
+              <span class="sr-only">Close</span>
+            </Dialog.Close>
+          </Dialog.Title>
+          <Dialog.Description class="sr-only">
+            {{ description }}
+          </Dialog.Description>
+
+          <slot name="default" />
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Portal>
+  </Dialog.Root>
+</template>

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

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    /**
+     * MD
+     */
+    title?: string;
+    width?: string;
+    description?: string;
+    disabled?: boolean;
+};
+type __VLS_Slots = {
+    trigger: () => void;
+    default: () => void;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,19 @@
+type MarkdownEditorVariable = Readonly<{
+    identity: string;
+    type: string;
+    description: string;
+}>;
+type __VLS_Props = {
+    variables?: ReadonlyArray<MarkdownEditorVariable>;
+};
+type __VLS_ModelProps = {
+    'modelValue': string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/markdown.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { computed, useAttrs } from "vue";
+const model = defineModel("modelValue", { type: String, ...{ required: true } });
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  variables: { type: Array, required: false }
+});
+const attrs = useAttrs();
+const textareaAttrs = computed(() => {
+  const { class: _class, ...rest } = attrs;
+  return rest;
+});
+</script>
+
+<template>
+  <div class="space-y-2">
+    <textarea
+      v-bind="textareaAttrs"
+      v-model="model"
+      :class="[
+  'w-full border text-sync-200 hover:text-sync-300 transition-colors duration-150 rounded-sm outline-none',
+  'text-zinc-700 text-xs font-mono placeholder:text-zinc-400 hover:border-zinc-300 focus:border-zinc-300',
+  'p-2 resize-none',
+  attrs.class
+]"
+      placeholder="输入 Markdown 使用 {{ }} 嵌入表达式"
+    />
+
+    <h3 class="text-sm text-zinc-700">
+      可使用的变量
+    </h3>
+
+    <ul
+      v-if="props.variables?.length"
+      class="space-y-1"
+    >
+      <li
+        v-for="variable in props.variables"
+        :key="variable.identity"
+        class="text-xs text-zinc-700 space-x-2 list-circle list-inside"
+      >
+        <span class="font-mono text-xs">{{ variable.identity }}: {{ variable.type }}</span>
+        <span
+          class="prose prose-zinc text-xs opacity-80"
+          v-html="$md.inline`${variable.description}`({})"
+        />
+      </li>
+    </ul>
+  </div>
+</template>

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

@@ -0,0 +1,19 @@
+type MarkdownEditorVariable = Readonly<{
+    identity: string;
+    type: string;
+    description: string;
+}>;
+type __VLS_Props = {
+    variables?: ReadonlyArray<MarkdownEditorVariable>;
+};
+type __VLS_ModelProps = {
+    'modelValue': string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -44,7 +44,7 @@ declare const __VLS_export: import("vue").DefineComponent<Readonly<{
     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<{
+}>, import("@tanstack/table-core").Table<unknown>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Readonly<{
     id: string;
     getRowId?: Expression;
     getSubRows?: Expression;

package/dist/runtime/components/table.vue

@@ -6,8 +6,12 @@ import { getProperty } from "dot-prop";
 import { Pagination } from "reka-ui/namespaced";
 import { computed, ref } from "vue";
 import { useNuxtApp } from "#app";
+import { Button } from "./ui/button";
 import { useTableRenderers } from "../composables/useTableRenderers";
 import Tooltip from "./tooltip.vue";
+import Dialog from "./dialog.vue";
+import MarkdownEditor from "./markdown.vue";
+import { useCheating } from "#imports";
 </script>
 
 <script setup>
@@ -25,6 +29,7 @@ const props = defineProps({
   paginationRight: { type: String, required: false }
 });
 const { $dsl } = useNuxtApp();
+const isCheating = useCheating();
 const { resolveTableRenderer } = useTableRenderers();
 const containerRef = ref(null);
 function genColumnId(column) {
@@ -296,17 +301,15 @@ function getSortIcon(column) {
                   <Icon icon="fluent:info-20-regular" />
                 </Tooltip>
 
-                <button
+                <Button
                   v-if="!header.isPlaceholder && header.column.getCanSort()"
-                  type="button"
-                  :class="[
-  'p-1 cursor-pointer outline-none absolute right-1 top-1/2 -translate-y-1/2 transform-3d',
-  'group-hover:opacity-100 opacity-60 transition-opacity duration-180 bg-transparent'
-]"
-                  @click="header.column.getToggleSortingHandler()?.($event)"
+                  variant="ghost"
+                  size="xs"
+                  class="absolute hover:bg-transparent right-1 top-1/2 -translate-y-1/2 transform-3d group-hover:opacity-100 opacity-60 transition-opacity duration-180"
+                  @click="(event) => header.column.getToggleSortingHandler()?.(event)"
                 >
                   <Icon :icon="getSortIcon(header.column)" />
-                </button>
+                </Button>
 
                 <div
                   v-if="!header.isPlaceholder && header.column.getCanResize() && (!header.column.getIsLastColumn('right') || !table.getIsSomeColumnsPinned('right') && !header.column.getIsLastColumn('center'))"
@@ -328,7 +331,7 @@ function getSortIcon(column) {
 ]"
                   @mousedown="header.getResizeHandler()($event)"
                 >
-                  <div :class="['w-2pt', 'translate-x-1pt', 'h-full', 'bg-blue-400']" />
+                  <div :class="['w-2pt', 'h-full', 'translate-x-1pt', 'transform-3d', 'bg-[color-mix(in_srgb,var(--primary)_80%,white)]']" />
                 </div>
               </th>
             </tr>
@@ -370,7 +373,7 @@ function getSortIcon(column) {
             </tr>
           </tbody>
 
-          <tfoot class="hidden has-[[data-footer]]:grid sticky bottom-0 z-10 select-none border-t border-zinc-200">
+          <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"
@@ -406,10 +409,48 @@ function getSortIcon(column) {
       </div>
     </div>
 
-    <div class="flex items-center justify-between w-full p-4 text-sm text-zinc-600">
-      <div>
-        <div />
-      </div>
+    <div class="flex items-center justify-between w-full py-2 gap-2 text-sm text-zinc-600">
+      <Dialog
+        title="编辑分页左侧文字"
+        width="50%"
+        :disabled="!isCheating"
+      >
+        <template #trigger>
+          <div
+            :class="[
+  'relative p-1 flex-1 prose prose-zinc text-xs border border-dashed',
+  isCheating ? 'border-(--primary)/20 rounded hover:border-(--primary)/40 transition-colors duration-150 group cursor-pointer' : 'border-transparent'
+]"
+          >
+            <span
+              v-html="$md.inline`${props.paginationLeft}`({
+  selected: table.getSelectedRowModel().rows.map((row) => row.original)
+})"
+            />
+            <Icon
+              v-if="isCheating"
+              icon="fluent:edit-20-regular"
+              class="w-4 h-4 text-(--primary) absolute right-1 top-1/2 -translate-y-1/2 transform-3d group-hover:opacity-100 opacity-50 transition-opacity duration-150"
+            />
+            &nbsp;
+          </div>
+        </template>
+        <template #default>
+          <MarkdownEditor
+            :model-value="props.paginationLeft ?? ''"
+            class="w-full h-64"
+            :variables="[
+  {
+    identity: 'selected',
+    type: 'list<dyn>',
+    description: $md.raw`
+                  表格被选中的行：如果没有被选中的行，那么这个变量将始终为空列表。
+                `
+  }
+]"
+          />
+        </template>
+      </Dialog>
       <div class="flex items-center gap-4">
         <span class="text-xs">{{ `\u5171 ${props.data.length} \u6761` }}</span>
         <Pagination.Root
@@ -426,7 +467,7 @@ function getSortIcon(column) {
             <Pagination.First
               :class="[
   'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
-  'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed cursor-pointer'
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
 ]"
             >
               <Icon
@@ -437,7 +478,7 @@ function getSortIcon(column) {
             <Pagination.Prev
               :class="[
   'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
-  'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed cursor-pointer'
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
 ]"
             >
               <Icon
@@ -453,8 +494,8 @@ function getSortIcon(column) {
               <Pagination.ListItem
                 v-if="page.type === 'page'"
                 :class="[
-  'w-7 h-7 flex items-center justify-center border border-zinc-200 rounded text-xs bg-transparent',
-  'data-[selected]:text-[var(--primary)] data-[selected]:border-[var(--primary)] hover:bg-zinc-100 transition cursor-pointer'
+  'w-7 h-7 flex items-center justify-center rounded text-xs bg-transparent',
+  'data-selected:text-(--primary) data-selected:border-(--primary) hover:bg-zinc-100 transition cursor-pointer'
 ]"
                 :value="page.value"
               >
@@ -471,7 +512,7 @@ function getSortIcon(column) {
             <Pagination.Next
               :class="[
   'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
-  'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed cursor-pointer'
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
 ]"
             >
               <Icon
@@ -482,7 +523,7 @@ function getSortIcon(column) {
             <Pagination.Last
               :class="[
   'w-7 h-7 flex items-center justify-center bg-transparent hover:bg-zinc-100 transition disabled:opacity-50 rounded text-zinc-600',
-  'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed cursor-pointer'
+  'data-disabled:opacity-50 data-disabled:cursor-not-allowed cursor-pointer'
 ]"
             >
               <Icon
@@ -494,7 +535,47 @@ function getSortIcon(column) {
         </Pagination.Root>
         <span class="text-xs">前往</span>
       </div>
-      <div />
+      <Dialog
+        title="编辑分页右侧文字"
+        width="50%"
+        :disabled="!isCheating"
+      >
+        <template #trigger>
+          <div
+            :class="[
+  'relative p-1 flex-1 prose prose-zinc text-xs border border-dashed',
+  isCheating ? 'border-(--primary)/20 rounded hover:border-(--primary)/40 transition-colors duration-150 group cursor-pointer' : 'border-transparent'
+]"
+          >
+            <span
+              v-html="$md.inline`${props.paginationRight}`({
+  selected: table.getSelectedRowModel().rows.map((row) => row.original)
+})"
+            />
+            <Icon
+              v-if="isCheating"
+              icon="fluent:edit-20-regular"
+              class="w-4 h-4 text-(--primary) absolute right-1 top-1/2 -translate-y-1/2 transform-3d group-hover:opacity-100 opacity-50 transition-opacity duration-150"
+            />
+            &nbsp;
+          </div>
+        </template>
+        <template #default>
+          <MarkdownEditor
+            :model-value="props.paginationRight ?? ''"
+            class="w-full h-64"
+            :variables="[
+  {
+    identity: 'selected',
+    type: 'list<dyn>',
+    description: $md.raw`
+                  表格被选中的行：如果没有被选中的行，那么这个变量将始终为空列表。
+                `
+  }
+]"
+          />
+        </template>
+      </Dialog>
     </div>
   </div>
 </template>

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

@@ -44,7 +44,7 @@ declare const __VLS_export: import("vue").DefineComponent<Readonly<{
     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<{
+}>, import("@tanstack/table-core").Table<unknown>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Readonly<{
     id: string;
     getRowId?: Expression;
     getSubRows?: Expression;

package/dist/runtime/components/tooltip.vue

@@ -39,7 +39,7 @@ const forwarded = useForwardPropsEmits(props, emits);
       />
       <Tooltip.Arrow
         :class="[
-  'bg-white fill-white size-2.5 translate-y-[calc(-50%)] rotate-45 rounded-[2px]',
+  'bg-white fill-white size-2.5 translate-y-[calc(-50%)] rotate-45 rounded-xs',
   'border-b border-r border-zinc-200'
 ]"
       />

package/dist/runtime/components/ui/button/Button.d.vue.ts

@@ -0,0 +1,27 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '.';
+interface Props extends PrimitiveProps {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/button/Button.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { cn } from "../../../utils/cn";
+import { Primitive, useForwardPropsEmits } from "reka-ui";
+import { buttonVariants } from ".";
+const props = defineProps({
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  class: { type: null, required: false },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false, default: "button" }
+});
+const emits = defineEmits(["click"]);
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    v-bind="forwarded"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/components/ui/button/Button.vue.d.ts

@@ -0,0 +1,27 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '.';
+interface Props extends PrimitiveProps {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/button/index.d.ts

@@ -0,0 +1,7 @@
+import type { VariantProps } from 'class-variance-authority';
+export { default as Button } from './Button.vue.js';
+export declare const buttonVariants: (props?: ({
+    variant?: "primary" | "default" | "destructive" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "xs" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/runtime/components/ui/button/index.js

@@ -0,0 +1,24 @@
+import { cva } from "class-variance-authority";
+export { default as Button } from "./Button.vue";
+export const buttonVariants = cva(
+  "cursor-pointer tracking-wide inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all duration-180 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none aria-invalid:border-red-200 select-none",
+  {
+    variants: {
+      variant: {
+        default: "border border-slate-200 bg-white text-slate-700 hover:bg-[color-mix(in_srgb,var(--primary)_20%,white)] hover:border-[color-mix(in_srgb,var(--primary)_60%,white)] hover:text-(--primary)",
+        destructive: "border border-red-200 text-red-600 bg-[color-mix(in_srgb,red_10%,white)] hover:bg-red-400 hover:border-red-400 hover:text-white",
+        primary: "bg-(--primary) text-white hover:bg-[color-mix(in_srgb,var(--primary)_70%,white)]",
+        ghost: "border-none bg-transparent text-slate-700 hover:bg-slate-100 hover:text-slate-900"
+      },
+      size: {
+        default: "h-8 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-6 rounded gap-1.5 text-xs px-3 has-[>svg]:px-2.5",
+        xs: "h-4 rounded gap-1 text-xs px-2 has-[>svg]:px-1"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);

package/dist/runtime/components/ui/separator/Separator.d.vue.ts

@@ -0,0 +1,11 @@
+import type { SeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = SeparatorProps & {
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+    decorative: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/separator/Separator.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { reactiveOmit } from "@vueuse/core";
+import { Separator } from "reka-ui";
+import { cn } from "../../../utils/cn";
+const props = defineProps({
+  orientation: { type: String, required: false, default: "horizontal" },
+  decorative: { type: Boolean, required: false, default: true },
+  asChild: { type: Boolean, required: false },
+  as: { type: null, required: false },
+  class: { type: null, required: false }
+});
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+  cn(
+    'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+    props.class
+  )
+"
+  />
+</template>

package/dist/runtime/components/ui/separator/Separator.vue.d.ts

@@ -0,0 +1,11 @@
+import type { SeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+type __VLS_Props = SeparatorProps & {
+    class?: HTMLAttributes['class'];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+    decorative: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/separator/index.d.ts

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue.js';

package/dist/runtime/components/ui/separator/index.js

@@ -0,0 +1 @@
+export { default as Separator } from "./Separator.vue";

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

@@ -14,7 +14,10 @@ export default defineNuxtPlugin({
         if (!expression)
           return "";
         try {
-          return $dsl.evaluate(expression, context);
+          const result = $dsl.evaluate(expression, context);
+          if (result !== null)
+            return String(result);
+          return "";
         } catch (e) {
           console.error(e);
           return "";

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

@@ -1,5 +1,6 @@
 export function md(...args) {
-  const original = String.raw(...args);
+  const [template, ...rest] = args;
+  const original = String.raw(template, ...rest.map((arg) => arg ?? ""));
   const indent = (original.startsWith("\n") ? original.slice(1) : original).split("\n", 1)[0]?.match(/^(\s*)/)?.[1]?.length ?? 0;
   return original.trim().replaceAll("\\`", "`").split("\n").map((line) => line.replace(new RegExp(`^${String.raw`\s`.repeat(indent)}`), "")).join("\n");
 }

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

@@ -0,0 +1,108 @@
+declare const _default: import("#app").Plugin<{
+    toast: ((message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number) & {
+        success: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        info: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        warning: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        error: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        custom: (component: import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        message: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        promise: <ToastData>(promise: Promise<ToastData> | (() => Promise<ToastData>), data?: ({
+            id?: number | string | undefined;
+            class?: string | undefined;
+            style?: import("vue").CSSProperties | undefined;
+            icon?: import("vue").Component | undefined;
+            toasterId?: string | undefined;
+            component?: import("vue").Component | undefined;
+            componentProps?: any;
+            richColors?: boolean | undefined;
+            invert?: boolean | undefined;
+            closeButton?: boolean | undefined;
+            dismissible?: boolean | undefined;
+            duration?: number | undefined;
+            important?: boolean | undefined;
+            action?: (import("vue-sonner").Action | import("vue").Component) | undefined;
+            cancel?: (import("vue-sonner").Action | import("vue").Component) | undefined;
+            onDismiss?: ((toast: import("vue-sonner").ToastT) => void) | undefined;
+            onAutoClose?: ((toast: import("vue-sonner").ToastT) => void) | undefined;
+            cancelButtonStyle?: import("vue").CSSProperties | undefined;
+            actionButtonStyle?: import("vue").CSSProperties | undefined;
+            unstyled?: boolean | undefined;
+            classes?: import("vue-sonner").ToastClasses | undefined;
+            descriptionClass?: string | undefined;
+            position?: ("top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center") | undefined;
+            closeButtonPosition?: ("top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            testId?: string | undefined;
+        } & {
+            loading?: string | import("vue").Component;
+            success?: (string | import("vue").Component | ((data: ToastData) => import("vue").Component | string | Promise<import("vue").Component | string>)) | (import("vue-sonner").PromiseIExtendedResult | ((data: ToastData) => import("vue-sonner").PromiseIExtendedResult | Promise<import("vue-sonner").PromiseIExtendedResult>)) | undefined;
+            error?: (string | import("vue").Component | ((data: any) => import("vue").Component | string | Promise<import("vue").Component | string>)) | (import("vue-sonner").PromiseIExtendedResult | ((data: any) => import("vue-sonner").PromiseIExtendedResult | Promise<import("vue-sonner").PromiseIExtendedResult>));
+            description?: string | import("vue").Component | ((data: any) => import("vue").Component | string | Promise<import("vue").Component | string>);
+            finally?: () => void | Promise<void>;
+        }) | undefined) => (string & {
+            unwrap: () => Promise<ToastData>;
+        }) | (number & {
+            unwrap: () => Promise<ToastData>;
+        }) | {
+            unwrap: () => Promise<ToastData>;
+        } | undefined;
+        dismiss: (id?: number | string) => string | number | undefined;
+        loading: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+    } & {
+        getHistory: () => (import("vue-sonner").ToastT<import("vue").Component> | import("vue-sonner").ToastToDismiss)[];
+        getToasts: () => (import("vue-sonner").ToastT<import("vue").Component> | import("vue-sonner").ToastToDismiss)[];
+    };
+}> & import("#app").ObjectPlugin<{
+    toast: ((message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number) & {
+        success: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        info: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        warning: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        error: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        custom: (component: import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        message: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+        promise: <ToastData>(promise: Promise<ToastData> | (() => Promise<ToastData>), data?: ({
+            id?: number | string | undefined;
+            class?: string | undefined;
+            style?: import("vue").CSSProperties | undefined;
+            icon?: import("vue").Component | undefined;
+            toasterId?: string | undefined;
+            component?: import("vue").Component | undefined;
+            componentProps?: any;
+            richColors?: boolean | undefined;
+            invert?: boolean | undefined;
+            closeButton?: boolean | undefined;
+            dismissible?: boolean | undefined;
+            duration?: number | undefined;
+            important?: boolean | undefined;
+            action?: (import("vue-sonner").Action | import("vue").Component) | undefined;
+            cancel?: (import("vue-sonner").Action | import("vue").Component) | undefined;
+            onDismiss?: ((toast: import("vue-sonner").ToastT) => void) | undefined;
+            onAutoClose?: ((toast: import("vue-sonner").ToastT) => void) | undefined;
+            cancelButtonStyle?: import("vue").CSSProperties | undefined;
+            actionButtonStyle?: import("vue").CSSProperties | undefined;
+            unstyled?: boolean | undefined;
+            classes?: import("vue-sonner").ToastClasses | undefined;
+            descriptionClass?: string | undefined;
+            position?: ("top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center") | undefined;
+            closeButtonPosition?: ("top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
+            testId?: string | undefined;
+        } & {
+            loading?: string | import("vue").Component;
+            success?: (string | import("vue").Component | ((data: ToastData) => import("vue").Component | string | Promise<import("vue").Component | string>)) | (import("vue-sonner").PromiseIExtendedResult | ((data: ToastData) => import("vue-sonner").PromiseIExtendedResult | Promise<import("vue-sonner").PromiseIExtendedResult>)) | undefined;
+            error?: (string | import("vue").Component | ((data: any) => import("vue").Component | string | Promise<import("vue").Component | string>)) | (import("vue-sonner").PromiseIExtendedResult | ((data: any) => import("vue-sonner").PromiseIExtendedResult | Promise<import("vue-sonner").PromiseIExtendedResult>));
+            description?: string | import("vue").Component | ((data: any) => import("vue").Component | string | Promise<import("vue").Component | string>);
+            finally?: () => void | Promise<void>;
+        }) | undefined) => (string & {
+            unwrap: () => Promise<ToastData>;
+        }) | (number & {
+            unwrap: () => Promise<ToastData>;
+        }) | {
+            unwrap: () => Promise<ToastData>;
+        } | undefined;
+        dismiss: (id?: number | string) => string | number | undefined;
+        loading: (message: string | (() => string | import("vue").Component) | import("vue").Component, data?: import("vue-sonner").ExternalToast) => string | number;
+    } & {
+        getHistory: () => (import("vue-sonner").ToastT<import("vue").Component> | import("vue-sonner").ToastToDismiss)[];
+        getToasts: () => (import("vue-sonner").ToastT<import("vue").Component> | import("vue-sonner").ToastToDismiss)[];
+    };
+}>;
+export default _default;

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

@@ -0,0 +1,12 @@
+import { defineNuxtPlugin } from "#app";
+import { toast as sonnerToast } from "vue-sonner";
+export default defineNuxtPlugin({
+  name: "shwfed-nuxt:toast",
+  setup: () => {
+    return {
+      provide: {
+        toast: sonnerToast
+      }
+    };
+  }
+});

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

@@ -5,6 +5,7 @@ import { defineComponent } from "vue";
 import { z } from "zod";
 import { defineTableRenderer } from "./registry.js";
 import { useNuxtApp } from "#app";
+import { Button } from "../components/ui/button/index.js";
 const JUSTIFY_CLASS = {
   left: "justify-start",
   center: "justify-center",
@@ -218,15 +219,10 @@ defineTableRenderer(
           children: [
             isEmpty ? "-" : String(rawValue),
             options.copyable && !isEmpty ? /* @__PURE__ */ jsx(
-              "button",
+              Button,
               {
-                type: "button",
-                class: [
-                  "cursor-pointer absolute right-1 top-1/2 -translate-y-1/2 bg-white border",
-                  "w-6 h-6 flex items-center justify-center group-hover:opacity-100 opacity-0",
-                  "transition-all duration-180 rounded border-zinc-200 text-zinc-500",
-                  "hover:border-[color-mix(in_srgb,var(--primary)_50%,white)] hover:text-[color-mix(in_srgb,var(--primary)_80%,#00000033)] hover:bg-[color-mix(in_srgb,var(--primary)_10%,white)]"
-                ],
+                class: "p-1 w-6 h-6 flex items-center justify-center right-1 top-1/2 -translate-y-1/2 transform-3d group-hover:opacity-100 opacity-0 absolute transition-opacity duration-180",
+                size: "xs",
                 onClick: onCopy,
                 children: /* @__PURE__ */ jsx(Icon, { icon: "fluent:copy-20-regular" })
               }
@@ -256,13 +252,13 @@ defineTableRenderer(
             checked: ctx.row.getIsSelected(),
             class: [
               "peer h-4 w-4 disabled:opacity-50 transition-colors duration-180 appearance-none",
-              "border border-zinc-200 not-checked-enabled-group-hover:border-zinc-300 not-checked-enabled-group-hover:bg-zinc-100 checked:border-[var(--primary)]",
+              "border border-zinc-200 not-checked-enabled-group-hover:border-zinc-300 not-checked-enabled-group-hover:bg-zinc-100 checked:border-(--primary)",
               isSingle ? "rounded-full" : "rounded"
             ],
             onInput: (e) => ctx.row.getToggleSelectedHandler()(e)
           }
         ),
-        isSingle ? /* @__PURE__ */ jsx("div", { class: "absolute inset-1 bg-[var(--primary)] pointer-events-none rounded-full peer-checked:opacity-100 opacity-0 transition-opacity duration-180" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        isSingle ? /* @__PURE__ */ jsx("div", { class: "absolute inset-1 bg-(--primary) pointer-events-none rounded-full peer-checked:opacity-100 opacity-0 transition-opacity duration-180" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
             Icon,
             {
@@ -270,7 +266,7 @@ defineTableRenderer(
               class: "peer-checked:opacity-100 opacity-0 text-white text-xs absolute z-1 -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2"
             }
           ),
-          /* @__PURE__ */ jsx("div", { class: "absolute inset-0 bg-[var(--primary)] rounded pointer-events-none peer-checked:opacity-100 opacity-0 transition-opacity duration-180" })
+          /* @__PURE__ */ jsx("div", { class: "absolute inset-0 bg-(--primary) rounded pointer-events-none peer-checked:opacity-100 opacity-0 transition-opacity duration-180" })
         ] })
       ] }) });
     },
@@ -291,7 +287,7 @@ defineTableRenderer(
             class: [
               "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)]"
+              "not-checked-group-hover:bg-[color-mix(in_srgb,var(--primary)_5%,#00000011)] checked:border-(--primary) checked:bg-(--primary)"
             ],
             ref: (el) => {
               if (el instanceof HTMLInputElement)
@@ -317,21 +313,22 @@ defineTableRenderer(
       if (!ctx.row.getCanExpand())
         return null;
       return /* @__PURE__ */ jsx("div", { class: "group w-full h-full flex items-center justify-center text-zinc-700", children: /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
-          type: "button",
-          class: "cursor-pointer bg-transparent",
-          onClick: () => ctx.row.getToggleExpandedHandler()(),
+          variant: "ghost",
+          class: "cursor-pointer hover:bg-transparent text-lg",
+          onClick: ctx.row.getToggleExpandedHandler(),
           children: /* @__PURE__ */ jsx(Icon, { icon: ctx.row.getIsExpanded() ? "fluent:subtract-square-20-regular" : "fluent:add-square-20-regular" })
         }
       ) });
     },
     header: ({ ctx }) => /* @__PURE__ */ jsx("div", { class: "group w-full h-full flex items-center justify-center text-base text-zinc-700", children: /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
-        type: "button",
-        class: "cursor-pointer bg-transparent",
-        onClick: (e) => ctx.table.getToggleAllRowsExpandedHandler()(e),
+        variant: "ghost",
+        size: "xs",
+        class: "cursor-pointer hover:bg-transparent text-lg",
+        onClick: ctx.table.getToggleAllRowsExpandedHandler(),
         children: /* @__PURE__ */ jsx(Icon, { icon: ctx.table.getIsAllRowsExpanded() ? "fluent:subtract-square-20-regular" : "fluent:add-square-20-regular" })
       }
     ) }),

package/dist/runtime/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare const cn: (...classes: ReadonlyArray<ClassValue>) => string;

package/dist/runtime/utils/cn.js

@@ -0,0 +1,3 @@
+import { twMerge } from "tailwind-merge";
+import { clsx } from "clsx";
+export const cn = (...classes) => twMerge(clsx(...classes));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shwfed/nuxt",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "description": "",
   "license": "MIT",
   "type": "module",
@@ -24,10 +24,6 @@
   "files": [
     "dist"
   ],
-  "workspaces": [
-    ".",
-    "playground"
-  ],
   "scripts": {
     "prepack": "nuxt-module-build build",
     "dev": "npm run dev:prepare && nuxt dev playground",
@@ -48,12 +44,16 @@
     "@tanstack/vue-table": "^8.21.3",
     "@tanstack/vue-virtual": "^3.13.18",
     "@vueuse/core": "^14.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "defu": "^6.1.4",
     "dot-prop": "^10.1.0",
     "markdown-it": "^14.1.0",
     "reka-ui": "^2.7.0",
+    "tailwind-merge": "^3.4.0",
     "vue": "^3.5.27",
+    "vue-sonner": "^2.0.9",
     "zod": "^4.3.6"
   },
   "devDependencies": {