@witchcraft/ui 0.1.3 → 0.2.1-beta.1

package/src/runtime/directives/vResizableCols.ts

@@ -1,7 +1,7 @@
-import { castType } from "@alanscodelog/utils/castType.js"
-import { override } from "@alanscodelog/utils/override.js"
-import { throttle } from "@alanscodelog/utils/throttle.js"
-import { unreachable } from "@alanscodelog/utils/unreachable.js"
+import { castType } from "@alanscodelog/utils/castType"
+import { override } from "@alanscodelog/utils/override"
+import { throttle } from "@alanscodelog/utils/throttle"
+import { unreachable } from "@alanscodelog/utils/unreachable"
 import type { Directive, Ref } from "vue"
 
 import { globalResizeObserver } from "../globalResizeObserver.js"
@@ -50,7 +50,7 @@ const throttledCallback = throttle(callback)
  * 	</div>
  * </template>
  * <script setup>
- * import {vResizeCols} from "@witchcraft/ui/directives/vResizableCols.js"
+ * import {vResizeCols} from "@witchcraft/ui/directives/vResizableCols"
  * </script>
  * ```
  *

package/src/runtime/helpers/NotificationHandler.ts

@@ -1,10 +1,10 @@
 import type { AnyFunction, MakeRequired } from "@alanscodelog/utils"
-import { castType } from "@alanscodelog/utils/castType.js"
-import { crop } from "@alanscodelog/utils/crop.js"
-import { indent } from "@alanscodelog/utils/indent.js"
-import { isBlank } from "@alanscodelog/utils/isBlank.js"
-import { pretty } from "@alanscodelog/utils/pretty.js"
-import { setReadOnly } from "@alanscodelog/utils/setReadOnly.js"
+import { castType } from "@alanscodelog/utils/castType"
+import { crop } from "@alanscodelog/utils/crop"
+import { indent } from "@alanscodelog/utils/indent"
+import { isBlank } from "@alanscodelog/utils/isBlank"
+import { pretty } from "@alanscodelog/utils/pretty"
+import { setReadOnly } from "@alanscodelog/utils/setReadOnly"
 
 
 export class NotificationHandler<

package/src/runtime/nuxt/plugins/vue-plugin.ts

@@ -1,4 +1,4 @@
-import { isArray } from "@alanscodelog/utils/isArray.js"
+import { isArray } from "@alanscodelog/utils/isArray"
 
 import { defineNuxtPlugin, useRuntimeConfig } from "#imports"
 

package/src/runtime/tailwind/themeConvertionOpts.ts

@@ -1,4 +1,4 @@
-import { type themeAsTailwindCss } from "metamorphosis/tailwind.js"
+import { type themeAsTailwindCss } from "metamorphosis/tailwind"
 
 
 export const themeConvertionOpts: Parameters<typeof themeAsTailwindCss>[1] = {

package/src/runtime/theme.ts

@@ -1,5 +1,5 @@
-import { baseTheme } from "metamorphosis/BaseTheme.js"
-import type { Theme } from "metamorphosis/Theme.js"
+import { baseTheme } from "metamorphosis/BaseTheme"
+import type { Theme } from "metamorphosis/Theme"
 
 
 export const theme = baseTheme as Theme

package/src/runtime/utils/notifyIfError.ts

@@ -1,4 +1,4 @@
-import { TypedError } from "@alanscodelog/utils/TypedError.js"
+import { TypedError } from "@alanscodelog/utils/TypedError"
 
 import { useNotificationHandler } from "../composables/useNotificationHandler.js"
 

package/src/runtime/vue/registerComponents.ts

@@ -1,4 +1,4 @@
-import { capitalize } from "@alanscodelog/utils/capitalize.js"
+import { capitalize } from "@alanscodelog/utils/capitalize"
 import type { App } from "vue"
 
 /**

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -1,36 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-declare const knownDirectives: readonly ["vExtractRootEl", "vResizableCols", "vResizeObserver", "vResizableCols"];
-declare module "@nuxt/schema" {
-    interface PublicRuntimeConfig {
-        witchcraftUi: Pick<ModuleOptions, "directives">;
-    }
-}
-interface ModuleOptions {
-    /**
-     * Whether to include the vite unplugin-icons plugins (pre-configured with the ui module's defaults.
-     *
-     * @default true
-     */
-    includeUnpluginIconsPlugins?: boolean;
-    directives: (typeof knownDirectives[number])[];
-    /**
-        * Which components (without a prefix) to register for auto-importing globally.
-        */
-    globalComponents: string[];
-    /**
-     * @default "W"
-     */
-    componentPrefix: string;
-    debug?: boolean;
-    /**
-     * @default "~/assets/css/tailwind.css" if it exists.
-     */
-    mainCssFile?: string;
-    /** @internal */
-    _playgroundWorkaround?: boolean;
-}
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
-
-export { _default as default };
-export type { ModuleOptions };

package/dist/runtime/components/Focus.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-/**
- * For testing the focus styles. The (still WIP) idea is that normally the outlined class is set by whether the user is using the keyboard or not. When true, outlines generated by the focus-outline-* or outlined-* utilities are allowed (they might not always appear since most components have focus-visible styles), when false, they are not allowed, but components can still set custom focus styles that will always appear. Either or is usually not a good idea unless all components set custom focus styles. For something like a web app, focus-visible should be allowed. For an app, this setup allows that to be configurable.
- */
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj<{}>;
-export declare const Primary: Story;
-export declare const OutlineForcedTrue: Story;
-export declare const OutlineFalse: Story;
-export declare const AlwaysAllowFocusVisible: Story;

package/dist/runtime/components/Focus.stories.js

@@ -1,53 +0,0 @@
-import { onMounted, ref } from "vue";
-import * as components from "./index.js";
-const meta = {
-  title: "Other/Focus",
-  args: {
-    outline: true
-  }
-};
-const template = `
-			<div class="focus-outline-no-offset border border-accent-600" tabindex="0">focus-outline-no-offset (outlined i.e. outlined-focus-visible)</div>
-			<div class="focus-outline border border-accent-600" tabindex="0">focus-outline (outlined i.e. outlined-focus-visible)</div>
-			<div class="outline-hidden outlined-focus:border-danger-500 border border-accent-600" tabindex="0">outlined-focus</div>
-			<div class="outline-hidden outlined-within:border-danger-500 border border-accent-600" >
-				outlined-within<div tabindex="0">Inner</div>
-			</div>
-			<div class="outline-hidden focus:border-danger-500 border border-accent-600" tabindex="0">Has Manual Focus Classes</div>
-		`;
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => {
-      const el = ref(null);
-      onMounted(() => {
-      });
-      return { ...args, el };
-    },
-    template
-  })
-};
-export const OutlineForcedTrue = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    forceOutline: true
-  }
-};
-export const OutlineFalse = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    outline: false
-  }
-};
-export const AlwaysAllowFocusVisible = {
-  render: (args) => ({
-    components,
-    setup: () => args,
-    template: `
-		<div class="outlined-visible group">${template}</div>
-		`
-  })
-};

package/dist/runtime/components/LibButton/LibButton.stories.d.ts

@@ -1,12 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import * as components from "../index.js.js";
-declare const meta: Meta<typeof components.LibButton>;
-export default meta;
-type Story = StoryObj<typeof components.LibButton>;
-export declare const Primary: Story;
-export declare const IconAfter: Story;
-export declare const OnlyIcon: Story;
-export declare const Disabled: Story;
-export declare const Borderless: Story;
-export declare const BorderlessDisabled: Story;
-export declare const WithDivInside: Story;

package/dist/runtime/components/LibButton/LibButton.stories.js

@@ -1,94 +0,0 @@
-import { capitalize } from "@alanscodelog/utils/capitalize.js";
-import IconFaSolidBell from "~icons/fa-solid/bell";
-import * as components from "../index.js";
-const meta = {
-  component: components.LibButton,
-  title: "Components/Button",
-  args: {
-    label: "Label",
-    // @ts-expect-error - custom prop for story
-    _iconAfter: true
-  }
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components: {
-      ...components,
-      IconFaSolidBell
-    },
-    setup: () => ({ args, capitalize }),
-    template: `
-		<div class="flex gap-4 justify-center">
-			<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary' ]">
-				<lib-button v-bind="{...args, color: type, label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false')}">
-					<template #icon>
-						<icon class="w-[1em]"><icon-fa-solid-bell /></icon>
-					</template>
-				</lib-button>
-			</template>
-		</div>
-		<div class="flex flex-col gap-4 pt-10">
-			<template v-for="type of [false, 'ok', 'warning', 'danger', 'primary', 'secondary']">
-				<lib-button v-bind="{...args, color: type , label: !args.label ? undefined : args.label + ' ' + capitalize(type || 'false') }">
-					${args._iconAfter ? `
-						<template #icon-after>
-							<icon class="w-[1em]"><icon-fa-solid-bell /></icon>
-						</template>
-					` : ``}
-				</lib-button>
-			</template>
-		</div>
-		`
-  })
-};
-export const IconAfter = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    // @ts-expect-error - .
-    _iconAfter: true
-  }
-};
-export const OnlyIcon = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    label: void 0
-  }
-};
-export const Disabled = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    disabled: true
-  }
-};
-export const Borderless = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    border: false
-  }
-};
-export const BorderlessDisabled = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    border: false,
-    disabled: true
-  }
-};
-export const WithDivInside = {
-  render: (args) => ({
-    components,
-    setup: () => ({ args }),
-    template: `
-		<div class="flex gap-4 justify-center">
-			<lib-button v-bind="{...args}">
-				<div>Div inside button still has a pointer cursor.</div>
-			</lib-button>
-		</div>
-		`
-  })
-};

package/dist/runtime/components/LibCheckbox/LibCheckbox.stories.d.ts

@@ -1,14 +0,0 @@
-import type { StoryObj } from "@storybook/vue3";
-import * as components from "../index.js.js";
-declare const meta: {
-    component: any;
-    title: string;
-    args: {
-        modelValue: boolean;
-        label: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof components.LibCheckbox>;
-export declare const Primary: Story;
-export declare const Disabled: any;

package/dist/runtime/components/LibCheckbox/LibCheckbox.stories.js

@@ -1,29 +0,0 @@
-import * as components from "../index.js";
-const meta = {
-  component: components.LibCheckbox,
-  title: "Components/Checkbox",
-  args: {
-    modelValue: true,
-    label: "Label"
-  }
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => ({ args }),
-    template: `
-			<lib-checkbox v-bind="args" v-model="args.modelValue"></lib-checkbox>
-			<br>
-			Opposite State:
-			<br>
-			<lib-checkbox v-bind="args" :modelValue="!args.modelValue" @update:modelValue="args.modelValue = !$event"></lib-checkbox>
-		`
-  })
-};
-export const Disabled = {
-  ...Primary,
-  args: {
-    disabled: true
-  }
-};

package/dist/runtime/components/LibColorInput/LibColorInput.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import LibColorInput from "./LibColorInput.vue.js";
-declare const meta: Meta<typeof LibColorInput>;
-export default meta;
-type Story = StoryObj<typeof LibColorInput>;
-export declare const Primary: Story;
-export declare const DoesNotAllowAlpha: Story;

package/dist/runtime/components/LibColorInput/LibColorInput.stories.js

@@ -1,58 +0,0 @@
-import { ref } from "vue";
-import LibColorInput from "./LibColorInput.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibColorInput,
-  title: "Components/ColorInput",
-  args: {}
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => {
-      const color = ref({
-        r: 0,
-        g: 0,
-        b: 0
-        /* , a: 0.5 */
-      });
-      const handleChange = (e) => {
-        color.value = { ...e };
-      };
-      return {
-        args: {
-          outline: false,
-          color,
-          allowAlpha: true,
-          ...args
-        },
-        handleChange
-      };
-    },
-    template: `
-			<lib-color-Input
-				:allowAlpha="args.allowAlpha"
-				:modelValue="args.color.value"
-				@update:modelValue="handleChange"
-			>
- 			</lib-color-Input>
-			Stretched:
-			<div class="flex-1 flex">
-				<lib-color-Input
-					class="flex-1"
-					:allowAlpha="args.allowAlpha"
-					:modelValue="args.color.value"
-					@update:modelValue="handleChange"
-				>
-				</lib-color-Input>
-			</div>
-		`
-  })
-};
-export const DoesNotAllowAlpha = {
-  ...Primary,
-  args: {
-    allowAlpha: false
-  }
-};

package/dist/runtime/components/LibColorPicker/LibColorPicker.stories.d.ts

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import LibColorPicker from "./LibColorPicker.vue.js";
-declare const meta: Meta<typeof LibColorPicker>;
-export default meta;
-type Story = StoryObj<typeof LibColorPicker>;
-export declare const Primary: Story;
-export declare const DoesNotAllowAlpha: Story;
-export declare const WithExistingValue: Story;
-export declare const CustomStringRepresentation: Story;

package/dist/runtime/components/LibColorPicker/LibColorPicker.stories.js

@@ -1,68 +0,0 @@
-import Color from "colorjs.io";
-import { ref } from "vue";
-import LibColorPicker from "./LibColorPicker.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibColorPicker,
-  title: "Components/ColorPicker",
-  args: {}
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => {
-      const color = ref({ r: 0, g: 0, b: 0, ...args.modelValue });
-      delete args.modelValue;
-      const handleChange = (e) => {
-        color.value = { ...e };
-      };
-      return {
-        args: {
-          outline: false,
-          color,
-          allowAlpha: true,
-          ...args
-        },
-        handleChange
-      };
-    },
-    template: `
-			<lib-root :outline="args.outline">
-	 		{{args.color}}
-	 		<lib-color-picker
-	 			:modelValue="args.color.value"
-				v-bind="args"
-	 			@update:modelValue="handleChange"
-	 		>
-	 		</lib-color-picker>
-	 		</lib-root>
-		`
-  })
-};
-export const DoesNotAllowAlpha = {
-  ...Primary,
-  args: {
-    allowAlpha: false
-  }
-};
-export const WithExistingValue = {
-  ...Primary,
-  args: {
-    modelValue: { r: 255, g: 0, b: 0 }
-  }
-};
-export const CustomStringRepresentation = {
-  ...Primary,
-  args: {
-    allowAlpha: false,
-    customRepresentation: {
-      fromHsvaToString: (hsva, includeAlpha) => new Color(
-        "hsv",
-        [hsva.h, hsva.s, hsva.v],
-        includeAlpha ? hsva.a : 1
-        // this takes care of the correct hex format
-      ).toString({ format: "hex" })
-    }
-  }
-};

package/dist/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.stories.d.ts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import LibDarkModeSwitcher from "./LibDarkModeSwitcher.vue.js";
-declare const meta: Meta<typeof LibDarkModeSwitcher>;
-export default meta;
-type Story = StoryObj<typeof LibDarkModeSwitcher>;
-export declare const Primary: Story;
-export declare const WithoutLabel: Story;

package/dist/runtime/components/LibDarkModeSwitcher/LibDarkModeSwitcher.stories.js

@@ -1,36 +0,0 @@
-import { ref } from "vue";
-import LibDarkModeSwitcher from "./LibDarkModeSwitcher.vue";
-import * as components from "../index.js";
-const meta = {
-  component: LibDarkModeSwitcher,
-  title: "Components/DarkModeSwitcher",
-  args: {}
-};
-export default meta;
-export const Primary = {
-  render: (args) => ({
-    components,
-    setup: () => {
-      const darkMode = ref(false);
-      return {
-        args,
-        darkMode
-      };
-    },
-    template: `
-			Value: {{darkMode}}
-			<LibDarkModeSwitcher 
-				@update:darkMode="darkMode = $event"
-				v-bind="{...args}"
-			></LibDarkModeSwitcher>
-			
-		`
-  })
-};
-export const WithoutLabel = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    showLabel: false
-  }
-};

package/dist/runtime/components/LibDatePicker/LibDatePicker.stories.d.ts

@@ -1,11 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import * as components from "../index.js.js";
-declare const singleMeta: Meta<typeof components.LibDatePicker>;
-export default singleMeta;
-type Story = StoryObj<typeof components.LibDatePicker>;
-export declare const Primary: Story;
-export declare const DateRange: Story;
-export declare const IconTriggerFirst: Story;
-export declare const BottomSlot: Story;
-export declare const DateWithTime: Story;
-export declare const WithDifferentFallbackDate: Story;

package/dist/runtime/components/LibDatePicker/LibDatePicker.stories.js

@@ -1,98 +0,0 @@
-import { CalendarDate, fromDate, getLocalTimeZone, toTimeZone } from "@internationalized/date";
-import { computed, ref } from "vue";
-import { createNoonUtcDate } from "../../helpers/createNoonUtcDate.js";
-import * as components from "../index.js";
-function html(strings, ...values) {
-  return String.raw(strings, ...values);
-}
-const singleMeta = {
-  component: components.LibDatePicker,
-  title: "Components/DatePicker",
-  args: {
-    // @ts-expect-error custom prop just for story
-    slot: "",
-    timeZone: getLocalTimeZone()
-  }
-};
-export default singleMeta;
-function toUTC(m, timeZone) {
-  return toTimeZone(fromDate(m, timeZone), "UTC").toAbsoluteString();
-}
-export const Primary = {
-  render: (args) => ({
-    components: {
-      ...components
-    },
-    setup: () => {
-      const modelValue = ref(args.modelValue);
-      const timeZone = ref(args.timeZone);
-      const debugUtcDate = computed(() => {
-        const m = modelValue.value;
-        const z = timeZone.value;
-        return m instanceof Date ? toUTC(m, z) : typeof m === "object" ? `Start: ${m.start ? toUTC(m.start, z) : "undefined"}, End: ${m.end ? toUTC(m.end, z) : "undefined"}` : "undefined";
-      });
-      return { args, getLocalTimeZone, modelValue, timeZone, debugUtcDate };
-    },
-    template: `
-			<div>Date: {{modelValue ?? "undefined"}}</div>
-			<div>Date UTC: {{debugUtcDate}}</div>
-			<div>Detected timezone (via @internationalized/date): {{getLocalTimeZone()}}</div>
-			<LibTimeZonePicker
-				v-model="timeZone"
-				label="Override Time Zone"
-				wrapper-class="[&_.suggestions]:max-h-[200px] [&_.suggestions]:overflow-y-auto"
-			/> 
-			<div>
-				This component has no border, added here to see it's size.
-			</div>
-			<div class="border border-neutral-500">
-				<LibDatePicker v-bind="args" v-model="modelValue" :time-zone="timeZone">
-					${args.slot}
-				</LibDatePicker>
-			</div>
-		`
-  })
-};
-export const DateRange = {
-  ...Primary,
-  args: {
-    modelValue: { start: void 0, end: void 0 }
-  }
-};
-export const IconTriggerFirst = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    class: "[&_.trigger]:order-first"
-  }
-};
-export const BottomSlot = {
-  ...Primary,
-  args: {
-    // @ts-expect-error see above
-    slot: html`
-			<template #default="slotProps">
-				<LibButton>Custom content can be added here.</LibButton>
-				<p class="break-all">
-					Content has access to the internal temporary/suggested date value and can change it (e.g. set it to today).
-				</p>	
-				<p>Temp value:</p>
-				{{ slotProps.tempValue }} 
-			</template>
-		`
-  }
-};
-export const DateWithTime = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    showTime: true
-  }
-};
-export const WithDifferentFallbackDate = {
-  ...Primary,
-  args: {
-    ...Primary.args,
-    fallbackDate: createNoonUtcDate(new CalendarDate(2e3, 1, 1)).toDate()
-  }
-};

package/dist/runtime/components/LibDebug/LibDebug.stories.d.ts

@@ -1,9 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/vue3";
-import LibDebug from "./LibDebug.vue.js";
-declare const meta: Meta<typeof LibDebug>;
-export default meta;
-type Story = StoryObj<typeof LibDebug>;
-export declare const Primary: Story;
-export declare const WithCustomTab: Story;
-export declare const NoValue: Story;
-export declare const StringWithWhitespace: Story;