@witchcraft/ui 0.3.13 → 0.3.14

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "witchcraftUi",
   "configKey": "witchcraftUi",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

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

@@ -34,16 +34,16 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
     onSave?: (() => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
 }>, {
     border: boolean;
     allowAlpha: boolean;
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
     };
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {
         stringColor: any;

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

@@ -34,16 +34,16 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
     onSave?: (() => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
 }>, {
     border: boolean;
     allowAlpha: boolean;
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
     };
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {
         stringColor: any;

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

@@ -39,18 +39,18 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
     onSave?: ((val: RgbaColor) => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
 }>, {
     border: boolean;
+    valid: boolean;
     allowAlpha: boolean;
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
         fromStringToHsva?: (string: string) => HsvaColor | undefined;
     };
-    valid: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -39,18 +39,18 @@ declare const __VLS_component: import("vue").DefineComponent<__VLS_PublicProps,
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: RgbaColor) => any) | undefined;
     onCancel?: (() => any) | undefined;
-    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
     onSave?: ((val: RgbaColor) => any) | undefined;
+    "onUpdate:tempValue"?: ((value: RgbaColor | undefined) => any) | undefined;
 }>, {
     border: boolean;
+    valid: boolean;
     allowAlpha: boolean;
-    copyTransform: (val: HsvaColor, stringVal: string) => any;
     stringPrecision: number;
     customRepresentation: {
         fromHsvaToString: (hsva: HsvaColor, includeAlpha: boolean) => string;
         fromStringToHsva?: (string: string) => HsvaColor | undefined;
     };
-    valid: boolean;
+    copyTransform: (val: HsvaColor, stringVal: string) => any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -110,8 +110,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     blur: (val: FocusEvent) => any;
     input: (val: InputEvent) => any;
     submit: (val: string, suggestion?: any) => any;
-    focus: (val: FocusEvent) => any;
     keydown: (val: KeyboardEvent) => any;
+    focus: (val: FocusEvent) => any;
     indicatorClick: (val: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<Props & {
     values?: string[] | undefined;
@@ -122,10 +122,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     onInput?: ((val: InputEvent) => any) | undefined;
     onSubmit?: ((val: string, suggestion?: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    onFocus?: ((val: FocusEvent) => any) | undefined;
-    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
     "onUpdate:inputValue"?: ((value: string) => any) | undefined;
     "onUpdate:values"?: ((value: string[] | undefined) => any) | undefined;
+    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
+    onFocus?: ((val: FocusEvent) => any) | undefined;
     onIndicatorClick?: ((val: MouseEvent) => any) | undefined;
 }>, {
     disabled: boolean;

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

@@ -110,8 +110,8 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     blur: (val: FocusEvent) => any;
     input: (val: InputEvent) => any;
     submit: (val: string, suggestion?: any) => any;
-    focus: (val: FocusEvent) => any;
     keydown: (val: KeyboardEvent) => any;
+    focus: (val: FocusEvent) => any;
     indicatorClick: (val: MouseEvent) => any;
 }, string, import("vue").PublicProps, Readonly<Props & {
     values?: string[] | undefined;
@@ -122,10 +122,10 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     onInput?: ((val: InputEvent) => any) | undefined;
     onSubmit?: ((val: string, suggestion?: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    onFocus?: ((val: FocusEvent) => any) | undefined;
-    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
     "onUpdate:inputValue"?: ((value: string) => any) | undefined;
     "onUpdate:values"?: ((value: string[] | undefined) => any) | undefined;
+    onKeydown?: ((val: KeyboardEvent) => any) | undefined;
+    onFocus?: ((val: FocusEvent) => any) | undefined;
     onIndicatorClick?: ((val: MouseEvent) => any) | undefined;
 }>, {
     disabled: boolean;

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

@@ -22,12 +22,12 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
+    canClose: boolean;
     useDialogForBackdrop: false;
     useBackdrop: boolean;
     preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     avoidRepositioning: boolean;
-    canClose: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     button?: (props: {
         extractEl: (_: any) => any;

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

@@ -22,12 +22,12 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<Props & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
 }>, {
+    canClose: boolean;
     useDialogForBackdrop: false;
     useBackdrop: boolean;
     preferredHorizontal: ("center" | "right" | "left" | "either" | "center-screen" | "right-most" | "left-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     preferredVertical: ("top" | "bottom" | "center" | "either" | "center-screen" | "top-most" | "bottom-most" | "center-most")[] | import("../../main.lib.js").PopupPositioner;
     avoidRepositioning: boolean;
-    canClose: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     button?: (props: {
         extractEl: (_: any) => any;

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

@@ -25,6 +25,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     slots: {
         [x: string]: ((props: {
             colKey: any;
+            config: any;
             style: string;
             class: string;
         }) => any) | undefined;

package/dist/runtime/components/LibTable/LibTable.vue

@@ -61,6 +61,7 @@
 ].join(' ')"
 					:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
 					:col-key="col"
+					:config="colConfig[col]"
 				>
 					<td
 						:class="[
@@ -145,7 +146,7 @@ const getExtraClasses = (row, col, isHeader) => {
 const extraClasses = computed(() => Object.fromEntries(
   [...Array(props.values.length + 1).keys()].map((row) => [...Array(props.cols.length).keys()].map((col) => [
     `${row - 1}-${col}`,
-    getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ")
+    " " + getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ") + " "
   ])).flat()
 ));
 </script>

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

@@ -25,6 +25,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     slots: {
         [x: string]: ((props: {
             colKey: any;
+            config: any;
             style: string;
             class: string;
         }) => any) | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@witchcraft/ui",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "description": "Vue component library.",
   "type": "module",
   "main": "./dist/runtime/main.lib.js",

package/src/runtime/components/LibTable/LibTable.stories.ts

@@ -7,12 +7,12 @@ import LibTable from "./LibTable.vue"
 import * as components from "../index.js"
 
 const meta: Meta<typeof LibTable> = {
-	component: LibTable,
+	component: LibTable as any,
 	title: "Components/Table"
 }
 
 export default meta
-type Story = StoryObj<typeof LibTable>
+type Story = StoryObj<typeof LibTable> & { args: { slots?: string } }
 export const Primary: Story = {
 	render: args => ({
 		components,
@@ -22,6 +22,7 @@ export const Primary: Story = {
 					<lib-table
 						v-bind="args"
 					>
+						${(args as any).slots}
 					</lib-table>
 				</div>
 		`
@@ -91,6 +92,38 @@ export const NoHeaderNoCellBorders: Story = {
 		cellBorder: false
 	}
 }
+
+export const InitialSize: Story = {
+	...Primary,
+	args: {
+		...Primary.args,
+		colConfig: {
+			prop1: { name: "Initially Flex 1", resizable: true },
+			prop2: { name: "Initially Flex 2", resizable: true },
+			prop3: { name: "Initially Size of Header", resizable: true }
+		},
+		resizable: {
+			enabled: true
+		},
+		class: `
+			[&:not(.resizable-cols-setup)]:block
+			[&:not(.resizable-cols-setup)_thead]:block
+			[&:not(.resizable-cols-setup)_thead_tr]:w-full
+			[&:not(.resizable-cols-setup)_thead_tr]:flex
+			[&:not(.resizable-cols-setup)_thead_tr]:flex-nowrap
+			[&:not(.resizable-cols-setup)_thead_td:not(.override-initial)]:flex-1
+		`,
+		slots: `
+			<template #header-prop3="colProps">
+			<td
+				:class="\`\${colProps.class} w-[min-content] whitespace-nowrap override-initial\`"
+			>
+				{{ colProps.config.name }}
+			</td>
+		</template>
+		`
+	}
+}
 export const FitWidthFalse: Story = {
 	...Primary,
 	args: {

package/src/runtime/components/LibTable/LibTable.vue

@@ -61,6 +61,7 @@
 					].join(' ')"
 					:style="`width:${widths.length > 0 ? widths[i] : ``}; `"
 					:col-key="col"
+					:config="(colConfig as any)[col]"
 				>
 					<td
 						:class="[
@@ -160,7 +161,7 @@ const extraClasses = computed(() => Object.fromEntries([...Array(props.values.le
 		.map(col =>
 			[
 				`${row - 1}-${col}`,
-				getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ")
+				" " +	getExtraClasses(row <= 0 ? 0 : row - 1, col, row === 0).join(" ") + " "
 			]))
 	.flat()
 ))