v-nuxt-ui 0.1.0

package/dist/runtime/components/Empty.vue

@@ -0,0 +1,26 @@
+<script setup>
+defineProps({
+  as: { type: null, required: false },
+  icon: { type: null, required: false, default: "i-lucide-inbox" },
+  avatar: { type: Object, required: false },
+  title: { type: String, required: false, default: "\u6682\u65E0\u6570\u636E" },
+  description: { type: String, required: false },
+  actions: { type: Array, required: false },
+  variant: { type: null, required: false, default: "naked" },
+  size: { type: null, required: false, default: "xs" },
+  class: { type: null, required: false },
+  ui: { type: Object, required: false },
+  extraClass: { type: String, required: false }
+});
+</script>
+
+<template>
+  <UEmpty
+    :variant="variant"
+    :icon="icon"
+    :title="title"
+    :size="size"
+    :class="extraClass"
+    class="h-full"
+  />
+</template>

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

@@ -0,0 +1,12 @@
+import type { EmptyProps } from '@nuxt/ui';
+type __VLS_Props = EmptyProps & {
+    extraClass?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    title: string;
+    variant: string | number | symbol;
+    icon: import("@nuxt/ui").IconProps["name"];
+    size: string | number | symbol;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,23 @@
+interface Props {
+    permission: string | string[];
+    mode?: 'hide' | 'disable';
+    fallback?: boolean;
+}
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    fallback?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    mode: "hide" | "disable";
+    fallback: boolean;
+}, {}, {}, {}, 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/PermissionWrapper.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { useToast } from "@nuxt/ui/composables";
+import { inject, computed } from "vue";
+const props = defineProps({
+  permission: { type: [String, Array], required: true },
+  mode: { type: String, required: false, default: "disable" },
+  fallback: { type: Boolean, required: false, default: false }
+});
+const hasPermissionsFn = inject("vui:hasPermissions", () => true);
+const hasPerm = computed(() => {
+  if (!props.permission) return true;
+  return hasPermissionsFn(props.permission);
+});
+const shouldShow = computed(() => {
+  if (props.mode === "hide") {
+    return hasPerm.value;
+  }
+  return true;
+});
+const shouldDisable = computed(() => {
+  return props.mode === "disable" && !hasPerm.value;
+});
+const toast = useToast();
+const handleClick = (e) => {
+  if (shouldDisable.value) {
+    e.stopPropagation();
+    e.preventDefault();
+    toast.add({
+      title: "\u6CA1\u6709\u6743\u9650",
+      description: "\u60A8\u6CA1\u6709\u6267\u884C\u6B64\u64CD\u4F5C\u7684\u6743\u9650",
+      color: "warning"
+    });
+  }
+};
+</script>
+
+<template>
+  <div
+    v-if="shouldShow"
+    @click.capture="handleClick"
+  >
+    <slot />
+  </div>
+  <div v-else-if="fallback">
+    <slot name="fallback">
+      <div class="text-gray-400 text-sm">
+        No permission
+      </div>
+    </slot>
+  </div>
+</template>

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

@@ -0,0 +1,23 @@
+interface Props {
+    permission: string | string[];
+    mode?: 'hide' | 'disable';
+    fallback?: boolean;
+}
+declare var __VLS_1: {}, __VLS_3: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+} & {
+    fallback?: (props: typeof __VLS_3) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    mode: "hide" | "disable";
+    fallback: boolean;
+}, {}, {}, {}, 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/ScrollArea.d.vue.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    enableTopTransparent?: boolean;
+    enableBottomTransparent?: boolean;
+    enableLeftTransparent?: boolean;
+    enableRightTransparent?: boolean;
+    enableHorizontalTooltip?: boolean;
+    onScrollEvent?: (ele: HTMLElement) => void;
+};
+declare var __VLS_41: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_41) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    scrollHorizontally: (targetX: number) => void;
+    scrollVertically: (targetY: number) => void;
+    scrollHorizontallyBy: (deltaX: number, behavior?: ScrollBehavior) => void;
+    scrollVerticallyBy: (deltaY: number, behavior?: ScrollBehavior) => void;
+}, {}, {}, {}, 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/ScrollArea.vue

@@ -0,0 +1,201 @@
+<script setup>
+import { ref, computed, useTemplateRef, onMounted, onUnmounted } from "vue";
+import { useDebounceFn } from "@vueuse/core";
+import {
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport
+} from "reka-ui";
+const props = defineProps({
+  enableTopTransparent: { type: Boolean, required: false },
+  enableBottomTransparent: { type: Boolean, required: false },
+  enableLeftTransparent: { type: Boolean, required: false },
+  enableRightTransparent: { type: Boolean, required: false },
+  enableHorizontalTooltip: { type: Boolean, required: false },
+  onScrollEvent: { type: Function, required: false }
+});
+const open = ref(false);
+const anchor = ref({ x: 0, y: 0 });
+const reference = computed(() => ({
+  getBoundingClientRect: () => ({
+    width: 0,
+    height: 0,
+    left: anchor.value.x,
+    right: anchor.value.x,
+    top: anchor.value.y,
+    bottom: anchor.value.y,
+    ...anchor.value
+  })
+}));
+const scrollArea = useTemplateRef("scrollArea");
+const isAtTop = ref(false);
+const isAtBottom = ref(false);
+const isAtLeft = ref(false);
+const isAtRight = ref(false);
+const onDetectBoundary = () => {
+  const viewport = scrollArea.value?.viewport;
+  if (!viewport) {
+    return;
+  }
+  const {
+    scrollTop,
+    scrollLeft,
+    clientHeight,
+    clientWidth,
+    scrollHeight,
+    scrollWidth
+  } = viewport;
+  isAtTop.value = scrollTop <= 1;
+  isAtBottom.value = scrollTop + clientHeight >= scrollHeight - 1;
+  isAtLeft.value = scrollLeft <= 1;
+  isAtRight.value = scrollLeft + clientWidth >= scrollWidth - 1;
+};
+const onScroll = useDebounceFn(() => {
+  onDetectBoundary();
+  const viewport = scrollArea.value?.viewport;
+  if (!viewport) {
+    return;
+  }
+  props.onScrollEvent?.(viewport);
+}, 128);
+const scrollHorizontally = (targetX) => {
+  const viewport = scrollArea.value?.viewport;
+  if (!viewport) {
+    return;
+  }
+  const viewportRect = viewport.getBoundingClientRect();
+  viewport.scrollTo({
+    left: targetX - (viewportRect.left + viewportRect.width / 2) + viewport.scrollLeft,
+    behavior: "smooth"
+  });
+};
+const scrollVertically = (targetY) => {
+  const viewport = scrollArea.value?.viewport;
+  if (!viewport) {
+    return;
+  }
+  const viewportRect = viewport.getBoundingClientRect();
+  viewport.scrollTo({
+    top: targetY - (viewportRect.top + viewportRect.height / 2) + viewport.scrollTop,
+    behavior: "smooth"
+  });
+};
+const scrollHorizontallyBy = (deltaX, behavior = "auto") => {
+  const viewport = scrollArea.value?.viewport;
+  if (!viewport) {
+    return;
+  }
+  viewport.scrollTo({
+    left: viewport.scrollLeft + deltaX,
+    behavior
+  });
+};
+const scrollVerticallyBy = (deltaY, behavior = "auto") => {
+  const viewport = scrollArea.value?.viewport;
+  if (!viewport) {
+    return;
+  }
+  viewport.scrollTo({
+    top: viewport.scrollTop + deltaY,
+    behavior
+  });
+};
+defineExpose({
+  scrollHorizontally,
+  scrollVertically,
+  scrollHorizontallyBy,
+  scrollVerticallyBy
+});
+onMounted(() => {
+  onScroll();
+  window.addEventListener("resize", onScroll);
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", onScroll);
+});
+</script>
+
+<template>
+  <ScrollAreaRoot
+    ref="scrollArea"
+    class="relative overflow-hidden size-full"
+    type="hover"
+    :scroll-hide-delay="256"
+  >
+    <!-- 边缘渐变装饰 -->
+    <Transition name="fade">
+      <div
+        v-if="enableTopTransparent && !isAtTop"
+        class="absolute top-0 z-10 w-full h-6 bg-linear-to-t from-transparent to-default"
+      />
+    </Transition>
+    <Transition name="fade">
+      <div
+        v-if="enableBottomTransparent && !isAtBottom"
+        class="absolute bottom-0 z-10 w-full h-6 bg-linear-to-b from-transparent to-default"
+      />
+    </Transition>
+    <Transition name="fade">
+      <div
+        v-if="enableLeftTransparent && !isAtLeft"
+        class="absolute left-0 z-10 h-full w-6 bg-linear-to-l from-transparent to-default"
+      />
+    </Transition>
+    <Transition name="fade">
+      <div
+        v-if="enableRightTransparent && !isAtRight"
+        class="absolute right-0 z-10 h-full w-6 bg-linear-to-r from-transparent to-default"
+      />
+    </Transition>
+
+    <ScrollAreaViewport class="size-full overscroll-contain" @scroll="onScroll">
+      <slot />
+    </ScrollAreaViewport>
+
+    <ScrollAreaScrollbar
+      class="flex select-none touch-none p-0.5 z-99 data-[state=visible]:animate-[fade-in_300ms_ease-in] data-[state=hidden]:animate-[fade-out_300ms_ease-out] data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2"
+      orientation="vertical"
+    >
+      <ScrollAreaThumb
+        class="flex-1 transition-colors bg-neutral-400/50 hover:bg-neutral-500/50 dark:bg-neutral-500/50 dark:hover:bg-neutral-400/50 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-10 before:min-h-10"
+      />
+    </ScrollAreaScrollbar>
+
+    <ScrollAreaScrollbar
+      class="flex select-none touch-none p-0.5 z-99 data-[state=visible]:animate-[fade-in_300ms_ease-in] data-[state=hidden]:animate-[fade-out_300ms_ease-out] data-[orientation=vertical]:w-2 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2"
+      orientation="horizontal"
+    >
+      <UTooltip
+        :delay-duration="100"
+        :open="open && enableHorizontalTooltip === true"
+        :reference="reference"
+        :content="{
+  side: 'top',
+  sideOffset: 10,
+  updatePositionStrategy: 'always'
+}"
+        :disabled="!enableHorizontalTooltip"
+      >
+        <ScrollAreaThumb
+          class="flex-1 transition-colors bg-neutral-400/50 hover:bg-neutral-500/50 dark:bg-neutral-500/50 dark:hover:bg-neutral-400/50 rounded-full relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full"
+          :class="enableHorizontalTooltip && 'before:min-w-10 before:min-h-10'"
+          @pointerenter="open = true"
+          @pointerleave="open = false"
+          @pointermove="
+  (ev) => {
+    anchor.x = ev.clientX;
+    anchor.y = ev.clientY;
+  }
+"
+        />
+        <template #content>
+          <UKbd value="Shift" size="sm" />+<UKbd
+            value="鼠标滚轮"
+            size="sm"
+          />可进行左右滚动
+        </template>
+      </UTooltip>
+    </ScrollAreaScrollbar>
+  </ScrollAreaRoot>
+</template>

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

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    enableTopTransparent?: boolean;
+    enableBottomTransparent?: boolean;
+    enableLeftTransparent?: boolean;
+    enableRightTransparent?: boolean;
+    enableHorizontalTooltip?: boolean;
+    onScrollEvent?: (ele: HTMLElement) => void;
+};
+declare var __VLS_41: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_41) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    scrollHorizontally: (targetX: number) => void;
+    scrollVertically: (targetY: number) => void;
+    scrollHorizontallyBy: (deltaX: number, behavior?: ScrollBehavior) => void;
+    scrollVerticallyBy: (deltaY: number, behavior?: ScrollBehavior) => void;
+}, {}, {}, {}, 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/Spin.d.vue.ts

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    loading: boolean | undefined;
+};
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+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/Spin.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  loading: { type: Boolean, required: true, skipCheck: true }
+});
+</script>
+
+<template>
+  <div class="relative">
+    <Transition name="fade">
+      <div
+        v-if="loading"
+        class="absolute inset-0 bg-default/75 flex items-center justify-center rounded-md z-10"
+      >
+        <UIcon
+          name="i-lucide-loader-circle"
+          class="animate-spin text-muted size-6"
+        />
+      </div>
+    </Transition>
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,16 @@
+type __VLS_Props = {
+    loading: boolean | undefined;
+};
+declare var __VLS_12: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_12) => any;
+};
+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/SqlEditor.d.vue.ts

@@ -0,0 +1,23 @@
+interface Props {
+    tables?: string[];
+    columns?: Record<string, string[]>;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    'modelValue': string | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
+    formatSQL: () => void;
+    getValue: () => any;
+    setValue: (newValue: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
+}>, {
+    tables: string[];
+    columns: Record<string, string[]>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;