@brickflow/ui 0.0.26 → 0.0.28

package/dist/runtime/components/Icon/index.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { computed } from "vue";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  name: { type: String, required: true }
+});
+const classes = computed(() => `icon-${props.name}`);
+</script>
+
+<template>
+  <i
+    v-bind="$attrs"
+    :class="[classes, 'aspect-square']"
+    role="img"
+  />
+</template>

package/dist/runtime/components/Icon/index.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    name: string;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=index.vue.d.ts.map

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

@@ -0,0 +1,8 @@
+export declare const uiDemo: {
+    description: string;
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=basic.demo.vue.d.ts.map

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

@@ -0,0 +1,27 @@
+<script>
+export const uiDemo = {
+  description: "Internal navigation keeps the current locale.",
+  title: "Basic usage"
+};
+</script>
+
+<script setup>
+import Link from "./index.vue";
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-4">
+    <Link
+      to="/"
+      class="text-main-300 hover:text-main-200"
+    >
+      Go to Home
+    </Link>
+    <Link
+      to="/ui?component=button"
+      class="text-main-300 hover:text-main-200"
+    >
+      Open Button
+    </Link>
+  </div>
+</template>

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

@@ -0,0 +1,8 @@
+export declare const uiDemo: {
+    description: string;
+    title: string;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=basic.demo.vue.d.ts.map

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

@@ -0,0 +1,51 @@
+import { type ComponentPublicInstance } from 'vue';
+import { type RouteLocationRaw } from 'vue-router';
+type __VLS_Props = {
+    activeClass?: string;
+    class?: (false | string)[] | string;
+    custom?: boolean;
+    exactActiveClass?: string;
+    external?: boolean;
+    faster?: boolean;
+    href?: RouteLocationRaw;
+    onClick?: () => void;
+    onPointerdown?: () => void;
+    prefetch?: boolean;
+    rel?: null | string;
+    replace?: boolean;
+    style?: Record<string, string>;
+    target?: '_blank' | '_parent' | '_self' | '_top' | null | (Record<string, never> & string);
+    to?: RouteLocationRaw;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    linkRef: import("vue").Ref<ComponentPublicInstance | undefined, ComponentPublicInstance | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    style: Record<string, string>;
+    onClick: () => void;
+    onPointerdown: () => void;
+    class: (false | string)[] | string;
+    replace: boolean;
+    activeClass: string;
+    custom: boolean;
+    exactActiveClass: string;
+    external: boolean;
+    faster: boolean;
+    href: RouteLocationRaw;
+    prefetch: boolean;
+    rel: null | string;
+    target: "_blank" | "_parent" | "_self" | "_top" | null | (Record<string, never> & string);
+    to: RouteLocationRaw;
+}, {}, {}, {}, 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;
+    };
+};
+//# sourceMappingURL=index.vue.d.ts.map

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

@@ -0,0 +1,62 @@
+<template>
+  <NuxtLink
+    ref="linkRef"
+    data-allow-mismatch
+    v-bind="prepareProps"
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useTranslate } from "../../composables/useTranslate";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  activeClass: { type: String, required: false, default: void 0 },
+  class: { type: [Array, String], required: false, default: void 0 },
+  custom: { type: Boolean, required: false, default: false },
+  exactActiveClass: { type: String, required: false, default: void 0 },
+  external: { type: Boolean, required: false, default: false },
+  faster: { type: Boolean, required: false, default: false },
+  href: { type: null, required: false, default: void 0 },
+  onClick: { type: Function, required: false, default: void 0 },
+  onPointerdown: { type: Function, required: false, default: void 0 },
+  prefetch: { type: Boolean, required: false, default: false },
+  rel: { type: [null, String], required: false, default: void 0 },
+  replace: { type: Boolean, required: false, default: false },
+  style: { type: Object, required: false, default: void 0 },
+  target: { type: [String, null, Object], required: false, default: void 0 },
+  to: { type: null, required: false, default: void 0 }
+});
+const { localePath } = useTranslate();
+const prepareProps = computed(() => {
+  const { faster: _faster, onPointerdown: _onPointerdown, ...linkProps } = props;
+  const refineDrops = { ...linkProps, onPointerdown: props.faster ? handlePointerDown : void 0 };
+  if (typeof props.to === "string") {
+    return { ...refineDrops, to: localePath(props.to) };
+  } else if (props.to?.path) {
+    return { ...refineDrops, to: { ...props.to, path: localePath(props.to.path) } };
+  }
+  return refineDrops;
+});
+const linkRef = ref();
+function handlePointerDown(e) {
+  const router = useRouter();
+  props.onPointerdown?.();
+  if (e.button !== 0) {
+    return;
+  }
+  if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+    return;
+  }
+  e.preventDefault();
+  const to = prepareProps.value.to;
+  if (!to) {
+    return;
+  }
+  props.replace ? router.replace(to) : router.push(to);
+}
+defineExpose({ linkRef });
+</script>

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

@@ -0,0 +1,51 @@
+import { type ComponentPublicInstance } from 'vue';
+import { type RouteLocationRaw } from 'vue-router';
+type __VLS_Props = {
+    activeClass?: string;
+    class?: (false | string)[] | string;
+    custom?: boolean;
+    exactActiveClass?: string;
+    external?: boolean;
+    faster?: boolean;
+    href?: RouteLocationRaw;
+    onClick?: () => void;
+    onPointerdown?: () => void;
+    prefetch?: boolean;
+    rel?: null | string;
+    replace?: boolean;
+    style?: Record<string, string>;
+    target?: '_blank' | '_parent' | '_self' | '_top' | null | (Record<string, never> & string);
+    to?: RouteLocationRaw;
+};
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    linkRef: import("vue").Ref<ComponentPublicInstance | undefined, ComponentPublicInstance | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    style: Record<string, string>;
+    onClick: () => void;
+    onPointerdown: () => void;
+    class: (false | string)[] | string;
+    replace: boolean;
+    activeClass: string;
+    custom: boolean;
+    exactActiveClass: string;
+    external: boolean;
+    faster: boolean;
+    href: RouteLocationRaw;
+    prefetch: boolean;
+    rel: null | string;
+    target: "_blank" | "_parent" | "_self" | "_top" | null | (Record<string, never> & string);
+    to: RouteLocationRaw;
+}, {}, {}, {}, 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;
+    };
+};
+//# sourceMappingURL=index.vue.d.ts.map

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

@@ -0,0 +1,18 @@
+declare const screen: {
+    readonly base: boolean;
+    readonly baseClass: "sm:hidden";
+    readonly lg: boolean;
+    readonly lgClass: "max-lg:hidden xl:hidden";
+    readonly md: boolean;
+    readonly mdClass: "max-md:hidden lg:hidden";
+    readonly ready: Promise<void>;
+    readonly sm: boolean;
+    readonly smClass: "max-sm:hidden md:hidden";
+    readonly xl: boolean;
+    readonly xlClass: "max-xl:hidden 2xl:hidden";
+    readonly xxl: boolean;
+    readonly xxlClass: "max-2xl:hidden";
+};
+export declare function useScreen(): typeof screen;
+export {};
+//# sourceMappingURL=useScreen.d.ts.map

package/dist/runtime/composables/useScreen.js

@@ -0,0 +1,68 @@
+import { onMounted, reactive } from "vue";
+const state = reactive({
+  base: true,
+  lg: true,
+  md: true,
+  sm: true,
+  xl: true,
+  xxl: true
+});
+const queries = {
+  base: "(width < 40rem)",
+  lg: "(64rem <= width < 80rem)",
+  md: "(48rem <= width < 64rem)",
+  sm: "(40rem <= width < 48rem)",
+  xl: "(80rem <= width < 96rem)",
+  xxl: "(width >= 96rem)"
+};
+let initialized = false;
+let resolveReady = () => void 0;
+const ready = import.meta.client ? new Promise((resolve) => {
+  resolveReady = resolve;
+}) : Promise.resolve();
+function initialize() {
+  if (initialized) {
+    return;
+  }
+  initialized = true;
+  for (const [key, query] of Object.entries(queries)) {
+    const mediaQuery = window.matchMedia(query);
+    const update = (event) => {
+      state[key] = event.matches;
+    };
+    update(mediaQuery);
+    mediaQuery.addEventListener("change", update);
+  }
+  resolveReady();
+}
+const screen = {
+  get base() {
+    return state.base;
+  },
+  baseClass: "sm:hidden",
+  get lg() {
+    return state.lg;
+  },
+  lgClass: "max-lg:hidden xl:hidden",
+  get md() {
+    return state.md;
+  },
+  mdClass: "max-md:hidden lg:hidden",
+  ready,
+  get sm() {
+    return state.sm;
+  },
+  smClass: "max-sm:hidden md:hidden",
+  get xl() {
+    return state.xl;
+  },
+  xlClass: "max-xl:hidden 2xl:hidden",
+  get xxl() {
+    return state.xxl;
+  },
+  xxlClass: "max-2xl:hidden"
+};
+export function useScreen() {
+  onMounted(initialize);
+  return screen;
+}

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

@@ -0,0 +1,17 @@
+import { type ComputedRef, type Ref } from 'vue';
+export type Theme = 'dark' | 'light';
+export interface ThemeController {
+    isDark: ComputedRef<boolean>;
+    isLight: ComputedRef<boolean>;
+    setTheme: (value: Theme) => void;
+    theme: Ref<Theme>;
+    toggleTheme: () => void;
+}
+/**
+ * Controls the colour theme used by the UI catalogue.
+ *
+ * The selected theme is stored in localStorage. A bootstrap script applies it
+ * before Nuxt mounts the application.
+ */
+export declare function useTheme(): ThemeController;
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/runtime/composables/useTheme.js

@@ -0,0 +1,77 @@
+import { useState } from "nuxt/app";
+import { computed, onMounted, onUnmounted, watch } from "vue";
+const THEME_STORAGE_KEY = "ui-theme";
+const THEME_STATE = "ui-theme";
+const normalizeTheme = (value) => value === "light" ? "light" : "dark";
+const getSystemTheme = () => window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+const getInitialTheme = () => {
+  if (!import.meta.client) {
+    return "dark";
+  }
+  try {
+    const storedTheme = localStorage.getItem(THEME_STORAGE_KEY);
+    if (storedTheme === "dark" || storedTheme === "light") {
+      return storedTheme;
+    }
+  } catch {
+  }
+  return getSystemTheme();
+};
+const applyTheme = (theme) => {
+  if (!import.meta.client) {
+    return;
+  }
+  const root = document.documentElement;
+  root.dataset.uiTheme = theme;
+  root.style.colorScheme = theme;
+};
+export function useTheme() {
+  const theme = useState(THEME_STATE, getInitialTheme);
+  const synchronizeTheme = () => {
+    const nextTheme = getInitialTheme();
+    theme.value = nextTheme;
+    applyTheme(nextTheme);
+  };
+  if (import.meta.client) {
+    synchronizeTheme();
+  }
+  onMounted(() => {
+    window.addEventListener("pageshow", synchronizeTheme);
+  });
+  onUnmounted(() => {
+    window.removeEventListener("pageshow", synchronizeTheme);
+  });
+  watch(
+    theme,
+    (value) => {
+      const nextTheme = normalizeTheme(value);
+      if (nextTheme !== value) {
+        theme.value = nextTheme;
+        return;
+      }
+      if (import.meta.client) {
+        applyTheme(nextTheme);
+        try {
+          localStorage.setItem(THEME_STORAGE_KEY, nextTheme);
+        } catch {
+        }
+      }
+    },
+    { flush: "sync" }
+  );
+  const isDark = computed(() => theme.value === "dark");
+  const isLight = computed(() => theme.value === "light");
+  const setTheme = (value) => {
+    theme.value = value;
+  };
+  const toggleTheme = () => {
+    theme.value = isDark.value ? "light" : "dark";
+  };
+  return {
+    isDark,
+    isLight,
+    setTheme,
+    theme,
+    toggleTheme
+  };
+}

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

@@ -0,0 +1,20 @@
+import type { RouteRecordNameGeneric } from 'vue-router';
+import { type App, type Ref } from 'vue';
+export interface BrickflowConfig {
+    i18n?: BrickflowI18n;
+}
+export interface BrickflowI18n {
+    getRealName: (route: {
+        name: RouteRecordNameGeneric;
+    }) => string;
+    getRealPath: (route: BrickflowRouteLocationParam | string) => string;
+    locale: Ref<string>;
+    localePath: (route: BrickflowRouteLocationParam | string) => string;
+}
+export interface BrickflowRouteLocationParam {
+    path: string;
+    query: Record<string, unknown>;
+}
+export declare function provideBrickflowConfig<T extends BrickflowConfig>(app: App, config: T): void;
+export declare function useTranslate(): BrickflowI18n;
+//# sourceMappingURL=useTranslate.d.ts.map

package/dist/runtime/composables/useTranslate.js

@@ -0,0 +1,17 @@
+import { inject, ref } from "vue";
+const brickflowConfigKey = Symbol("brickflow-config");
+const useTranslateFallback = () => {
+  const getRealPath = (route) => typeof route === "string" ? route : route.path;
+  return {
+    getRealName: (route) => String(route.name),
+    getRealPath,
+    locale: ref("en"),
+    localePath: getRealPath
+  };
+};
+export function provideBrickflowConfig(app, config) {
+  app.provide(brickflowConfigKey, config);
+}
+export function useTranslate() {
+  return inject(brickflowConfigKey)?.i18n ?? useTranslateFallback();
+}

package/dist/runtime/icon-font.d.ts

@@ -0,0 +1,4 @@
+declare module '#brickflow-ui-icons' {
+  export const firstIconName: string
+  export const iconNames: readonly string[]
+}

package/dist/runtime/pages/ui.d.vue.ts

@@ -0,0 +1,4 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=ui.vue.d.ts.map