@byyuurin/ui 0.0.11 → 0.2.0

package/dist/runtime/vue/components/Link.vue

@@ -0,0 +1,163 @@
+<script>
+
+</script>
+
+<script setup>
+import { reactiveOmit, reactivePick } from "@vueuse/core";
+import { isEqual } from "ohash/utils";
+import { useForwardProps } from "reka-ui";
+import { hasProtocol } from "ufo";
+import { computed } from "vue";
+import theme from "#build/ui/link";
+import { useAppConfig, useRoute } from "#imports";
+import LinkBase from "../../components/LinkBase.vue";
+import { isPartiallyEqual } from "../../utils/link";
+import { cv, merge } from "../../utils/style";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false, default: "button" },
+  type: { type: null, required: false, default: "button" },
+  label: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  active: { type: Boolean, required: false, default: void 0 },
+  exact: { type: Boolean, required: false },
+  exactQuery: { type: [Boolean, String], required: false },
+  exactHash: { type: Boolean, required: false },
+  inactiveClass: { type: String, required: false },
+  custom: { type: Boolean, required: false },
+  raw: { type: Boolean, required: false },
+  class: { type: [Object, String, Number, Boolean, null, Array], required: false, skipCheck: true },
+  to: { type: null, required: false },
+  href: { type: null, required: false },
+  external: { type: Boolean, required: false },
+  target: { type: [String, Object], required: false },
+  rel: { type: [String, Object], required: false },
+  noRel: { type: Boolean, required: false },
+  prefetchedClass: { type: String, required: false },
+  prefetch: { type: Boolean, required: false },
+  prefetchOn: { type: [String, Object], required: false },
+  noPrefetch: { type: Boolean, required: false },
+  activeClass: { type: String, required: false },
+  exactActiveClass: { type: String, required: false },
+  ariaCurrentValue: { type: String, required: false, default: "page" },
+  viewTransition: { type: Boolean, required: false },
+  replace: { type: Boolean, required: false }
+});
+defineSlots();
+const route = useRoute();
+const inheritProps = useForwardProps(reactivePick(props, "as", "type", "disabled"));
+const routerLinkProps = useForwardProps(reactiveOmit(props, "as", "type", "disabled", "active", "exact", "exactQuery", "exactHash", "activeClass", "inactiveClass", "to", "href", "raw", "custom", "class"));
+const to = computed(() => props.to ?? props.href);
+const isExternal = computed(() => {
+  if (props.external)
+    return true;
+  if (!to.value)
+    return false;
+  return typeof to.value === "string" && hasProtocol(to.value, { acceptRelative: true });
+});
+function isLinkActive({ route: linkRoute, isActive, isExactActive }) {
+  if (props.active !== void 0)
+    return props.active;
+  if (props.exactQuery === "partial") {
+    if (!isPartiallyEqual(linkRoute.query, route.query))
+      return false;
+  } else if (props.exactQuery === true && !isEqual(linkRoute.query, route.query)) {
+    return false;
+  }
+  if (props.exactHash && linkRoute.hash !== route.hash)
+    return false;
+  if (props.exact && isExactActive)
+    return true;
+  if (!props.exact && isActive)
+    return true;
+  return false;
+}
+const appConfig = useAppConfig();
+const ui = computed(() => {
+  const link = merge(theme, {
+    ...appConfig.ui.link,
+    variants: {
+      ...appConfig.ui.link?.variants,
+      active: {
+        true: [appConfig.ui.link?.variants?.active?.true, props.activeClass].filter(Boolean).join(" "),
+        false: [appConfig.ui.link?.variants?.active?.false, props.inactiveClass].filter(Boolean).join(" ")
+      }
+    }
+  });
+  return cv(link)();
+});
+function resolveLinkClass({ route: route2, isActive, isExactActive } = {}) {
+  const active = isLinkActive({ route: route2, isActive, isExactActive });
+  if (props.raw)
+    return [props.class, active ? props.activeClass : props.inactiveClass];
+  return ui.value.base({ ...props, active });
+}
+</script>
+
+<template>
+  <template v-if="!isExternal && !!to">
+    <RouterLink v-slot="{ href, navigate, route: linkRoute, isActive, isExactActive }" v-bind="routerLinkProps" :to="to" custom>
+      <template v-if="custom">
+        <slot
+          v-bind="{
+  ...$attrs,
+  ...props.exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  ...inheritProps,
+  href,
+  navigate,
+  active: isLinkActive({ route: linkRoute, isActive, isExactActive })
+}"
+        >
+          {{ props.label }}
+        </slot>
+      </template>
+      <LinkBase
+        v-else
+        v-bind="{
+  ...$attrs,
+  ...props.exact && isExactActive ? { 'aria-current': props.ariaCurrentValue } : {},
+  ...inheritProps,
+  href,
+  navigate
+}"
+        :class="resolveLinkClass({ route: linkRoute, isActive, isExactActive })"
+      >
+        <slot :active="isLinkActive({ route: linkRoute, isActive, isExactActive })">
+          {{ props.label }}
+        </slot>
+      </LinkBase>
+    </RouterLink>
+  </template>
+
+  <template v-else>
+    <template v-if="custom">
+      <slot
+        v-bind="{
+  ...$attrs,
+  ...inheritProps,
+  href: to,
+  target: isExternal ? '_blank' : void 0,
+  active,
+  isExternal
+}"
+      >
+        {{ props.label }}
+      </slot>
+    </template>
+    <LinkBase
+      v-else
+      v-bind="{
+  ...$attrs,
+  ...inheritProps,
+  href: to,
+  target: isExternal ? '_blank' : void 0,
+  isExternal
+}"
+      :class="resolveLinkClass()"
+    >
+      <slot :active="active">
+        {{ props.label }}
+      </slot>
+    </LinkBase>
+  </template>
+</template>

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

@@ -0,0 +1,95 @@
+import type { PrimitiveProps } from 'reka-ui';
+import type { ButtonHTMLAttributes } from 'vue';
+import type { RouteLocationRaw, RouterLinkProps } from 'vue-router';
+import type { ComponentBaseProps } from '../../types';
+import type { StaticSlot } from '../../types/utils';
+export interface LinkSlots {
+    default: StaticSlot<{
+        active: boolean;
+    }>;
+}
+interface NuxtLinkProps extends Omit<RouterLinkProps, 'to'> {
+    /**
+     * Route Location the link should navigate to when clicked on.
+     */
+    to?: RouteLocationRaw;
+    /**
+     * An alias for `to`. If used with `to`, `href` will be ignored
+     */
+    href?: NuxtLinkProps['to'];
+    /**
+     * Forces the link to be considered as external (true) or internal (false). This is helpful to handle edge-cases
+     */
+    external?: boolean;
+    /**
+     * Where to display the linked URL, as the name for a browsing context.
+     */
+    target?: '_blank' | '_parent' | '_self' | '_top' | (string & {});
+    /**
+     * A rel attribute value to apply on the link. Defaults to "noopener noreferrer" for external links.
+     */
+    rel?: 'noopener' | 'noreferrer' | 'nofollow' | 'sponsored' | 'ugc' | (string & {});
+    /**
+     * If set to true, no rel attribute will be added to the link
+     */
+    noRel?: boolean;
+    /**
+     * A class to apply to links that have been prefetched.
+     */
+    prefetchedClass?: string;
+    /**
+     * When enabled will prefetch middleware, layouts and payloads of links in the viewport.
+     */
+    prefetch?: boolean;
+    /**
+     * Allows controlling when to prefetch links. By default, prefetch is triggered only on visibility.
+     */
+    prefetchOn?: 'visibility' | 'interaction' | Partial<{
+        visibility: boolean;
+        interaction: boolean;
+    }>;
+    /**
+     * Escape hatch to disable `prefetch` attribute.
+     */
+    noPrefetch?: boolean;
+}
+export interface LinkProps extends ComponentBaseProps, NuxtLinkProps {
+    /**
+     * The element or component this component should render as when not a link.
+     * @default "button"
+     */
+    as?: PrimitiveProps['as'];
+    /**
+     * The type of the button when not a link.
+     * @default "button"
+     */
+    type?: ButtonHTMLAttributes['type'];
+    label?: string;
+    disabled?: boolean;
+    /** Force the link to be active independent of the current route. */
+    active?: boolean;
+    /** Will only be active if the current route is an exact match. */
+    exact?: boolean;
+    /** Allows controlling how the current route query sets the link as active. */
+    exactQuery?: boolean | 'partial';
+    /** Will only be active if the current route hash is an exact match. */
+    exactHash?: boolean;
+    /** The class to apply when the link is inactive. */
+    inactiveClass?: string;
+    custom?: boolean;
+    /** When `true`, only styles from `class`, `activeClass`, and `inactiveClass` will be applied. */
+    raw?: boolean;
+}
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<LinkProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LinkProps> & Readonly<{}>, {
+    active: boolean;
+    type: "reset" | "submit" | "button";
+    ariaCurrentValue: "page" | "step" | "location" | "date" | "time" | "true" | "false";
+    as: import("reka-ui").AsTag | import("vue").Component;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, LinkSlots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/vue/composables/useAppConfig.d.ts

@@ -0,0 +1 @@
+export declare const useAppConfig: () => any;

package/dist/runtime/vue/composables/useAppConfig.js

@@ -0,0 +1,4 @@
+import { reactive } from "vue";
+import appConfig from "#build/app.config";
+const _appConfig = reactive(appConfig);
+export const useAppConfig = () => _appConfig;

package/dist/runtime/vue/plugins/color-mode.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(): void;
+};
+export default _default;

package/dist/runtime/vue/plugins/color-mode.js

@@ -0,0 +1,6 @@
+import { useDark } from "@vueuse/core";
+export default {
+  install() {
+    useDark();
+  }
+};

package/dist/runtime/vue/plugins/head.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install(app: import("vue").App<any>): void;
+};
+export default _default;

package/dist/runtime/vue/plugins/head.js

@@ -0,0 +1,9 @@
+import { createHead } from "@unhead/vue/client";
+export default {
+  install(app) {
+    if (app._context.provides.usehead)
+      return;
+    const head = createHead();
+    app.use(head);
+  }
+};

package/dist/runtime/vue/stubs.d.ts

@@ -1,9 +1,24 @@
 import type { Ref } from 'vue';
+import type { NuxtApp } from '#app';
+export { useAppConfig } from './composables/useAppConfig';
+export { useHead } from '@unhead/vue';
 export { useRoute, useRouter } from 'vue-router';
+export declare function useColorMode(): {
+    forced: boolean;
+    preference?: undefined;
+    readonly value?: undefined;
+} | {
+    preference: "light" | "dark" | "system";
+    readonly value: import("@vueuse/core").BasicColorMode;
+    forced: boolean;
+};
 export declare function useState<T>(key: string, init: () => T): Ref<T>;
 export declare function useNuxtApp(): {
     isHydrating: boolean;
     payload: {
-        serverRendered: boolean;
+        serverRendered: any;
     };
 };
+export declare function defineNuxtPlugin(plugin: (nuxtApp: NuxtApp) => void): {
+    install(app: import("vue").App<any>): void;
+};

package/dist/runtime/vue/stubs.js

@@ -1,5 +1,29 @@
+import { useColorMode as _useColorMode } from "@vueuse/core";
 import { ref } from "vue";
+import appConfig from "#build/app.config";
+export { useAppConfig } from "./composables/useAppConfig.js";
+export { useHead } from "@unhead/vue";
 export { useRoute, useRouter } from "vue-router";
+export function useColorMode() {
+  if (!appConfig.colorMode) {
+    return {
+      forced: false
+    };
+  }
+  const { store, system } = _useColorMode();
+  return {
+    get preference() {
+      return store.value === "auto" ? "system" : store.value;
+    },
+    set preference(value) {
+      store.value = value === "system" ? "auto" : value;
+    },
+    get value() {
+      return store.value === "auto" ? system.value : store.value;
+    },
+    forced: false
+  };
+}
 const state = {};
 export function useState(key, init) {
   if (state[key])
@@ -11,6 +35,13 @@ export function useState(key, init) {
 export function useNuxtApp() {
   return {
     isHydrating: true,
-    payload: { serverRendered: false }
+    payload: { serverRendered: import.meta.env.SSR || false }
+  };
+}
+export function defineNuxtPlugin(plugin) {
+  return {
+    install(app) {
+      app.runWithContext(() => plugin({ vueApp: app }));
+    }
   };
 }

package/dist/setup.d.mts

@@ -0,0 +1,13 @@
+import '#build/ui';
+import './shared/ui.IulR-OYx.mjs';
+import '../dist/runtime/types/style.js';
+export { A as AppConfigIcons, a as AppConfigUI, s as setup } from './shared/ui.DpbffTXs.mjs';
+import './unocss.mjs';
+import '@nuxt/schema';
+import '@unocss/preset-wind4/colors';
+import '../dist/runtime/types/index.js';
+import 'unplugin';
+import 'unplugin-auto-import/types';
+import 'unplugin-vue-components/types';
+import '@unocss/core';
+import '@unocss/preset-wind4/theme';

package/dist/setup.mjs

@@ -0,0 +1,12 @@
+function setup(defaults = {}) {
+  const uno = {
+    colors: defaults.theme?.colors
+  };
+  const vite = defaults;
+  return {
+    uno,
+    vite
+  };
+}
+
+export { setup };

package/dist/shared/ui.CzIlLITK.mjs

@@ -0,0 +1,51 @@
+import { pick } from '../../dist/runtime/utils/index.js';
+
+const icons = {
+  close: "i-lucide-x",
+  loading: "i-lucide-loader-circle",
+  check: "i-lucide-check",
+  chevronUp: "i-lucide-chevron-up",
+  chevronDown: "i-lucide-chevron-down",
+  chevronLeft: "i-lucide-chevron-left",
+  chevronRight: "i-lucide-chevron-right",
+  chevronDoubleLeft: "i-lucide-chevrons-left",
+  chevronDoubleRight: "i-lucide-chevrons-right",
+  ellipsis: "i-lucide-ellipsis",
+  plus: "i-lucide-plus",
+  minus: "i-lucide-minus",
+  external: "i-lucide-arrow-up-right"
+};
+
+function getDefaultUIConfig(colors) {
+  return {
+    colors: pick({
+      primary: "green",
+      secondary: "blue",
+      success: "green",
+      info: "blue",
+      warning: "yellow",
+      error: "red",
+      neutral: "slate"
+    }, [...colors || [], "neutral"]),
+    icons
+  };
+}
+const defaultOptions = {
+  prefix: "U",
+  fonts: true,
+  colorMode: true,
+  theme: {
+    colors: void 0,
+    transitions: true
+  }
+};
+const defaultColors = ["primary", "secondary", "success", "info", "warning", "error"];
+function resolveColors(colors) {
+  return colors?.length ? [.../* @__PURE__ */ new Set(["primary", ...colors])] : [...defaultColors];
+}
+function pickColorNames(colors) {
+  return colors;
+}
+const neutralColors = pickColorNames(["slate", "gray", "zinc", "neutral", "stone", "light", "dark"]);
+
+export { defaultOptions as d, getDefaultUIConfig as g, neutralColors as n, resolveColors as r };