@witchcraft/ui 0.1.1 → 0.1.3

package/dist/runtime/components/LibPalette/LibPalette.vue

@@ -7,7 +7,7 @@
 					:style="`background-color: var(${color});`"
 					:class="`theme-palette--item h-10 rounded-sm flex items-center justify-center text-fg dark:text-bg`"
 				>
-					{{ [5, 16, 27, 38, 49].includes(i) ? "Text" : "" }}
+					{{ [5, 16, 27, 38, 49].includes(i) ? 'Text':'' }}
 				</div>
 			</template>
 		</div>
@@ -22,25 +22,28 @@
 </div>
 </template>
 
-<script>
-export default { name: "lib-palette" };
+<script lang="ts">
+export default { name: "lib-palette" }
 </script>
 
-<script setup>
-import { keys } from "@alanscodelog/utils/keys.js";
-import {} from "metamorphosis";
-import { baseInteractivePropsDefaults } from "../shared/props.js";
-const props = defineProps(/* @__PURE__ */ _mergeDefaults({
-  id: { type: String, required: false },
-  disabled: { type: Boolean, required: false },
-  readonly: { type: Boolean, required: false },
-  border: { type: Boolean, required: false },
-  unstyle: { type: Boolean, required: false },
-  theme: { type: Object, required: true }
-}, {
-  theme: () => ({}),
-  ...baseInteractivePropsDefaults
-}));
-const exclude = ["--color-bg", "--color-fg"];
-const colors = keys(props.theme.css).filter((key) => key.startsWith("--color") && !exclude.includes(key));
+<script setup  lang="ts">
+import { keys } from "@alanscodelog/utils/keys.js"
+import { type Theme } from "metamorphosis"
+
+import { type BaseInteractiveProps, baseInteractivePropsDefaults,type LinkableByIdProps } from "../shared/props.js"
+
+
+const props = withDefaults(defineProps<
+& LinkableByIdProps
+& BaseInteractiveProps
+& {
+	theme: Theme
+}>(), {
+	theme: () => ({} as any),
+	...baseInteractivePropsDefaults
+})
+
+const exclude = ["--color-bg", "--color-fg"]
+const colors = keys(props.theme.css).filter(key => key.startsWith("--color") && !exclude.includes(key))
+
 </script>

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

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import LibPopup from "./LibPopup.vue.js";
+declare const meta: Meta<typeof LibPopup>;
+export default meta;
+type Story = StoryObj<typeof LibPopup>;
+export declare const Primary: Story;
+export declare const PopupNoShift: any;
+/** When the popup is too wide, it's positioned to the left and overflow scroll is set with an invisible scrollbar. */
+export declare const PopupTooBig: any;
+export declare const PopupCenterScreen: any;
+export declare const PopupRightBottomMost: any;
+export declare const PopupLeftTopMost: any;
+export declare const PopupCenterMost: any;
+export declare const LeftMenuShapeExample: any;

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

@@ -0,0 +1,147 @@
+import { computed, ref, watch } from "vue";
+import LibPopup from "./LibPopup.vue";
+import { vExtractRootEl } from "../../directives/vExtractRootEl.js";
+import * as components from "../index.js";
+const meta = {
+  component: LibPopup,
+  title: "Components/Popup",
+  args: {}
+};
+export default meta;
+export const Primary = {
+  render: (args) => ({
+    components,
+    directives: { extractRootEl: vExtractRootEl },
+    setup: () => {
+      const value = ref(false);
+      const buttonPositions = ["TL", "TC", "TR", "BL", "BC", "BR"];
+      const buttonPos = ref("TL");
+      const autoRotatePos = ref(true);
+      const buttonStyle = computed(() => {
+        switch (buttonPos.value) {
+          case "TL":
+            return `align-self: flex-start; justify-self: flex-start;`;
+          case "TC":
+            return `align-self: flex-start; justify-self: center;`;
+          case "TR":
+            return `align-self: flex-start; justify-self: flex-end;`;
+          case "BL":
+            return `align-self: flex-end; justify-self: flex-start;`;
+          case "BC":
+            return `align-self: flex-end; justify-self: center;`;
+          case "BR":
+            return `align-self: flex-end; justify-self: flex-end;`;
+          default:
+            return "";
+        }
+      });
+      watch(value, () => {
+        if (!value.value && autoRotatePos.value) {
+          const buttonI = buttonPositions.indexOf(buttonPos.value);
+          if (buttonI < 5) {
+            buttonPos.value = buttonPositions[buttonI + 1];
+          } else {
+            buttonPos.value = buttonPositions[0];
+          }
+        }
+      });
+      return {
+        args,
+        buttonPos,
+        autoRotatePos,
+        buttonStyle,
+        value
+      };
+    },
+    template: `
+			<lib-simple-input
+				:suggestions="['TL', 'TR', 'BL', 'BR']"
+				:restrict-to-suggestions="true"
+				:suggestions-filter="(_, items) => items"
+				:label="'Button Position'"
+				v-model="buttonPos"
+			>
+			</lib-simple-input>
+			<div>
+				<label>Auto Rotate Position</label>
+				<input type="checkbox" v-model="autoRotatePos">
+			</div>
+			<div class="test bg-transparency-squares" style="display:grid;height:80vh;padding:50px;border:1px solid black;">
+
+			<lib-popup v-model="value" v-bind="{ ...args, width:undefined, }" >
+			{{value}}
+				<template #button="{extractEl}">
+					<lib-button :style="buttonStyle" @click="value = !value" v-extract-root-el="extractEl">Toggle Popup</lib-button>
+				</template>
+				<template #popup="{position, extractEl}">
+						<lib-debug
+							v-extract-root-el="extractEl"
+							:style="(args.width ? \`width: \${args.width};\` : '') + (args.height ? \`height: \${args.height};\` : '')"
+							class="bg-bg dark:bg-fg w-[500px]"
+						>
+							{{ position }}
+						</lib-debug>
+				</template>
+			</lib-popup>
+			</div>
+			`
+  })
+};
+export const PopupNoShift = {
+  ...Primary,
+  args: {
+    avoidRepositioning: true
+  }
+};
+export const PopupTooBig = {
+  ...Primary,
+  args: {
+    width: "110vw"
+  }
+};
+export const PopupCenterScreen = {
+  ...Primary,
+  args: {
+    width: "500px",
+    height: "500px",
+    preferredHorizontal: ["center-screen"],
+    preferredVertical: ["center-screen"]
+  }
+};
+export const PopupRightBottomMost = {
+  ...Primary,
+  args: {
+    width: "500px",
+    height: "500px",
+    preferredHorizontal: ["right-most"],
+    preferredVertical: ["bottom-most"]
+  }
+};
+export const PopupLeftTopMost = {
+  ...Primary,
+  args: {
+    width: "500px",
+    height: "500px",
+    preferredHorizontal: ["left-most"],
+    preferredVertical: ["top-most"]
+  }
+};
+export const PopupCenterMost = {
+  ...Primary,
+  args: {
+    width: "500px",
+    height: "500px",
+    preferredHorizontal: ["center-most"],
+    preferredVertical: ["center-most"]
+  }
+};
+export const LeftMenuShapeExample = {
+  ...Primary,
+  args: {
+    width: "300px",
+    height: "500px",
+    preferredHorizontal: ["left-most"],
+    preferredVertical: ["center-most"],
+    avoidRepositioning: true
+  }
+};