@katlux/block-ecommerce 0.1.0-beta.0 → 0.1.0-beta.10

package/dist/module.d.mts

@@ -0,0 +1,6 @@
+interface ModuleOptions {
+}
+declare const _default: any;
+
+export { _default as default };
+export type { ModuleOptions };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "@katlux/block-ecommerce",
+  "configKey": "katluxEcommerceBlocks",
+  "compatibility": {
+    "nuxt": "^3.0.0"
+  },
+  "version": "0.1.0-beta.10",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "3.6.1"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,23 @@
+import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit';
+
+const module$1 = defineNuxtModule({
+  meta: {
+    name: "@katlux/block-ecommerce",
+    configKey: "katluxEcommerceBlocks",
+    compatibility: {
+      nuxt: "^3.0.0"
+    }
+  },
+  defaults: {},
+  async setup(options, nuxt) {
+    const resolver = createResolver(import.meta.url);
+    addComponentsDir({
+      path: resolver.resolve("./runtime/components"),
+      pathPrefix: false,
+      prefix: "",
+      global: true
+    });
+  }
+});
+
+export { module$1 as default };

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

@@ -0,0 +1,32 @@
+import type { KProductRowAction } from '@katlux/providers';
+import { ADataProvider } from '@katlux/providers';
+type __VLS_Props = {
+    dataProvider: ADataProvider;
+    layout?: 'grid' | 'list';
+    rowActions?: KProductRowAction[];
+    gridColumns?: number | string;
+    gap?: string;
+};
+declare var __VLS_1: {
+    item: import("@katlux/providers").TDataRow;
+    index: number;
+}, __VLS_11: string, __VLS_12: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    rowActions: KProductRowAction[];
+    layout: "grid" | "list";
+    gridColumns: number | string;
+    gap: string;
+}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/components/KProductList/KProductList.logic.d.ts

@@ -0,0 +1,52 @@
+import type { ADataProvider, KProductRowAction } from '@katlux/providers';
+import { type PropType } from 'vue';
+export interface KProductListProps {
+    dataProvider: ADataProvider;
+    layout?: 'grid' | 'list';
+    rowActions?: KProductRowAction[];
+    gridColumns?: number | string;
+    gap?: string;
+}
+export declare const KProductListDefaultProps: {
+    dataProvider: {
+        type: PropType<ADataProvider>;
+        required: boolean;
+    };
+    layout: {
+        type: PropType<"grid" | "list">;
+        default: string;
+    };
+    rowActions: {
+        type: PropType<KProductRowAction[]>;
+        default: () => never[];
+    };
+    gridColumns: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+    gap: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export declare function useKProductListLogic(props: KProductListProps): {
+    isGrid: import("vue").ComputedRef<boolean>;
+    gridStyles: import("vue").ComputedRef<{
+        display?: undefined;
+        gridTemplateColumns?: undefined;
+        gap?: undefined;
+    } | {
+        display: string;
+        gridTemplateColumns: string;
+        gap: string | undefined;
+    }>;
+    listStyles: import("vue").ComputedRef<{
+        display?: undefined;
+        flexDirection?: undefined;
+        gap?: undefined;
+    } | {
+        display: string;
+        flexDirection: "column";
+        gap: string | undefined;
+    }>;
+};

package/dist/runtime/components/KProductList/KProductList.logic.js

@@ -0,0 +1,48 @@
+import { computed } from "vue";
+export const KProductListDefaultProps = {
+  dataProvider: {
+    type: Object,
+    required: true
+  },
+  layout: {
+    type: String,
+    default: "grid"
+  },
+  rowActions: {
+    type: Array,
+    default: () => []
+  },
+  gridColumns: {
+    type: [Number, String],
+    default: 4
+  },
+  gap: {
+    type: String,
+    default: "1rem"
+  }
+};
+export function useKProductListLogic(props) {
+  const isGrid = computed(() => props.layout !== "list");
+  const gridStyles = computed(() => {
+    if (!isGrid.value) return {};
+    const cols = props.gridColumns;
+    return {
+      display: "grid",
+      gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
+      gap: props.gap
+    };
+  });
+  const listStyles = computed(() => {
+    if (isGrid.value) return {};
+    return {
+      display: "flex",
+      flexDirection: "column",
+      gap: props.gap
+    };
+  });
+  return {
+    isGrid,
+    gridStyles,
+    listStyles
+  };
+}

package/{src → dist}/runtime/components/KProductList/KProductList.vue

@@ -29,42 +29,32 @@
 </div>
 </template>
 
-<script lang="ts" setup>
-import type { KProductItemData, KProductRowAction } from '@katlux/providers'
-import { ADataProvider } from '@katlux/providers'
-import { useKProductListLogic } from './KProductList.logic'
-
-const props = withDefaults(defineProps<{
-	dataProvider: ADataProvider
-	layout?: 'grid' | 'list'
-	rowActions?: KProductRowAction[]
-	gridColumns?: number | string
-	gap?: string
-}>(), {
-	layout: 'grid',
-	rowActions: () => [],
-	gridColumns: 4,
-	gap: '1rem'
-})
-
-const { isGrid, gridStyles, listStyles } = useKProductListLogic(props as any)
+<script setup>
+import { ADataProvider } from "@katlux/providers";
+import { useKProductListLogic } from "./KProductList.logic";
+const props = defineProps({
+  dataProvider: { type: Object, required: true },
+  layout: { type: String, required: false, default: "grid" },
+  rowActions: { type: Array, required: false, default: () => [] },
+  gridColumns: { type: [Number, String], required: false, default: 4 },
+  gap: { type: String, required: false, default: "1rem" }
+});
+const { isGrid, gridStyles, listStyles } = useKProductListLogic(props);
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .k-product-list {
-	width: 100%;
-	
-	.list-container {
-		width: 100%;
-	}
-
-	.footer {
-		display: flex;
-		justify-content: flex-end;
-		margin-top: var(--gap-lg, 24px);
-		.pagination {
-			flex: 1;
-		}
-	}
+  width: 100%;
+}
+.k-product-list .list-container {
+  width: 100%;
+}
+.k-product-list .footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--gap-lg, 24px);
+}
+.k-product-list .footer .pagination {
+  flex: 1;
 }
 </style>

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

@@ -0,0 +1,32 @@
+import type { KProductRowAction } from '@katlux/providers';
+import { ADataProvider } from '@katlux/providers';
+type __VLS_Props = {
+    dataProvider: ADataProvider;
+    layout?: 'grid' | 'list';
+    rowActions?: KProductRowAction[];
+    gridColumns?: number | string;
+    gap?: string;
+};
+declare var __VLS_1: {
+    item: import("@katlux/providers").TDataRow;
+    index: number;
+}, __VLS_11: string, __VLS_12: any;
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    rowActions: KProductRowAction[];
+    layout: "grid" | "list";
+    gridColumns: number | string;
+    gap: string;
+}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,8 @@
+import type { KProductItemData, KProductRowAction } from '@katlux/providers';
+type __VLS_Props = {
+    item: KProductItemData;
+    rowActions?: KProductRowAction[];
+};
+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;

package/dist/runtime/components/KProductListItem/KProductListItem.logic.d.ts

@@ -0,0 +1,20 @@
+import { type PropType } from 'vue';
+import type { KProductItemData, KProductRowAction } from '@katlux/providers';
+export interface KProductListItemProps {
+    item: KProductItemData;
+    rowActions?: KProductRowAction[];
+}
+export declare const KProductListItemDefaultProps: {
+    item: {
+        type: PropType<KProductItemData>;
+        required: true;
+    };
+    rowActions: {
+        type: PropType<KProductRowAction[]>;
+        default: () => never[];
+    };
+};
+export declare function useKProductListItemLogic(props: KProductListItemProps): {
+    hasActions: import("vue").ComputedRef<boolean | undefined>;
+    formattedPrice: import("vue").ComputedRef<string>;
+};

package/dist/runtime/components/KProductListItem/KProductListItem.logic.js

@@ -0,0 +1,25 @@
+import { computed } from "vue";
+export const KProductListItemDefaultProps = {
+  item: {
+    type: Object,
+    required: true
+  },
+  rowActions: {
+    type: Array,
+    default: () => []
+  }
+};
+export function useKProductListItemLogic(props) {
+  const hasActions = computed(() => props.rowActions && props.rowActions.length > 0);
+  const formattedPrice = computed(() => {
+    if (props.item.price === void 0) return "";
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: props.item.currency || "USD"
+    }).format(props.item.price);
+  });
+  return {
+    hasActions,
+    formattedPrice
+  };
+}

package/dist/runtime/components/KProductListItem/KProductListItem.vue

@@ -0,0 +1,113 @@
+<template lang="pug">
+.k-product-list-item
+	.item-image(v-if="item.image")
+		img(:src="item.image" :alt="item.title")
+	.item-image-placeholder(v-else)
+		KIcon(name="tabler:photo" class="placeholder-icon")
+	.item-details
+		h3.item-title {{ item.title }}
+		p.item-description(v-if="item.description") {{ item.description }}
+		.item-price(v-if="formattedPrice") {{ formattedPrice }}
+	.item-actions(v-if="hasActions")
+		KButton(
+			v-for="(action, index) in rowActions" 
+			:key="index" 
+			:class="action.color || 'primary'" 
+			@click="action.action(item)"
+		) 
+			template(v-if="action.icon" #icon)
+				KIcon(:name="action.icon")
+			| {{ action.label }}
+</template>
+
+<script setup>
+const props = defineProps({
+  item: { type: Object, required: true },
+  rowActions: { type: Array, required: false }
+});
+import { useKProductListItemLogic } from "./KProductListItem.logic";
+const { hasActions, formattedPrice } = useKProductListItemLogic(props);
+</script>
+
+<style scoped>
+.k-product-list-item {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border-color-light, #e9ecef);
+  border-radius: var(--border-radius-md, 8px);
+  overflow: hidden;
+  background: var(--bg-color-surface, #ffffff);
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+  height: 100%;
+}
+.k-product-list-item:hover {
+  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
+  transform: translateY(-2px);
+}
+.k-product-list-item .item-image, .k-product-list-item .item-image-placeholder {
+  width: 100%;
+  aspect-ratio: 1;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-color-muted, #f8f9fa);
+  border-bottom: 1px solid var(--border-color-light, #e9ecef);
+}
+.k-product-list-item .item-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+.k-product-list-item:hover .item-image img {
+  transform: scale(1.05);
+}
+.k-product-list-item .item-image-placeholder .placeholder-icon {
+  font-size: 3rem;
+  color: var(--text-color-muted, #adb5bd);
+  opacity: 0.5;
+}
+.k-product-list-item .item-details {
+  padding: var(--gap-md, 16px);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+.k-product-list-item .item-title {
+  margin: 0 0 var(--gap-xs, 4px) 0;
+  font-size: var(--font-size-lg, 1.1rem);
+  font-weight: 600;
+  color: var(--text-color-primary, #212529);
+  line-height: 1.3;
+}
+.k-product-list-item .item-description {
+  margin: 0 0 var(--gap-sm, 8px) 0;
+  font-size: var(--font-size-sm, 0.9rem);
+  color: var(--text-color-secondary, #6c757d);
+  line-height: 1.4;
+  flex-grow: 1;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.k-product-list-item .item-price {
+  font-size: var(--font-size-xl, 1.25rem);
+  font-weight: 700;
+  color: var(--color-primary, #0d6efd);
+  margin-top: auto;
+  padding-top: var(--gap-sm, 8px);
+}
+.k-product-list-item .item-actions {
+  padding: var(--gap-md, 16px);
+  padding-top: 0;
+  display: flex;
+  gap: var(--gap-sm, 8px);
+  flex-wrap: wrap;
+}
+.k-product-list-item .item-actions :deep(.KButton) {
+  flex: 1;
+  min-width: 100px;
+}
+</style>

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

@@ -0,0 +1,8 @@
+import type { KProductItemData, KProductRowAction } from '@katlux/providers';
+type __VLS_Props = {
+    item: KProductItemData;
+    rowActions?: KProductRowAction[];
+};
+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;

package/dist/types.d.mts

@@ -0,0 +1,3 @@
+export { default } from './module.mjs'
+
+export { type ModuleOptions } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@katlux/block-ecommerce",
-	"version": "0.1.0-beta.0",
+	"version": "0.1.0-beta.10",
 	"description": "Pre-built eCommerce block components for Katlux toolkit",
 	"author": "Katlux",
 	"license": "MIT",
@@ -10,7 +10,8 @@
 	"main": "./dist/module.mjs",
 	"scripts": {
 		"build": "nuxt-module-build build",
-		"dev": "nuxt-module-build build --stub"
+		"dev": "nuxt-module-build build --stub",
+		"prepublishOnly": "npm run build"
 	},
 	"exports": {
 		".": {
@@ -27,5 +28,8 @@
 		"@nuxt/kit": "^3.20.1",
 		"pug": "^3.0.0",
 		"sass": "^1.80.0"
-	}
+	},
+	"files": [
+		"dist"
+	]
 }

package/build.config.ts

@@ -1,4 +0,0 @@
-export default {
-	failOnWarn: false,
-	externals: ['#app', '@katlux/toolkit', '@katlux/providers']
-}

package/src/module.ts

@@ -1,25 +0,0 @@
-import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit'
-
-export interface ModuleOptions { }
-
-export default defineNuxtModule<ModuleOptions>({
-	meta: {
-		name: '@katlux/block-ecommerce',
-		configKey: 'katluxEcommerceBlocks',
-		compatibility: {
-			nuxt: '^3.0.0'
-		}
-	},
-	defaults: {},
-	async setup(options, nuxt) {
-		const resolver = createResolver(import.meta.url)
-
-		// Add components directory
-		addComponentsDir({
-			path: resolver.resolve('./runtime/components'),
-			pathPrefix: false,
-			prefix: '',
-			global: true
-		})
-	}
-})

package/src/runtime/components/KProductList/KProductList.logic.ts

@@ -1,64 +0,0 @@
-import type { ADataProvider, KProductItemData, KProductRowAction } from '@katlux/providers'
-import { computed, type PropType } from 'vue'
-
-export interface KProductListProps {
-	dataProvider: ADataProvider
-	layout?: 'grid' | 'list'
-	rowActions?: KProductRowAction[]
-	gridColumns?: number | string
-	gap?: string
-}
-
-export const KProductListDefaultProps = {
-	dataProvider: {
-		type: Object as PropType<ADataProvider>,
-		required: true,
-	},
-	layout: {
-		type: String as PropType<'grid' | 'list'>,
-		default: 'grid',
-	},
-	rowActions: {
-		type: Array as PropType<KProductRowAction[]>,
-		default: () => [],
-	},
-	gridColumns: {
-		type: [Number, String],
-		default: 4,
-	},
-	gap: {
-		type: String,
-		default: '1rem',
-	}
-}
-
-export function useKProductListLogic(props: KProductListProps) {
-	const isGrid = computed(() => props.layout !== 'list')
-
-	const gridStyles = computed(() => {
-		if (!isGrid.value) return {}
-
-		const cols = props.gridColumns
-		return {
-			display: 'grid',
-			gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
-			gap: props.gap
-		}
-	})
-
-	const listStyles = computed(() => {
-		if (isGrid.value) return {}
-
-		return {
-			display: 'flex',
-			flexDirection: 'column' as const,
-			gap: props.gap
-		}
-	})
-
-	return {
-		isGrid,
-		gridStyles,
-		listStyles
-	}
-}

package/src/runtime/components/KProductListItem/KProductListItem.logic.ts

@@ -1,36 +0,0 @@
-import { computed, type PropType } from 'vue'
-import type { KProductItemData, KProductRowAction } from '@katlux/providers'
-
-
-export interface KProductListItemProps {
-	item: KProductItemData
-	rowActions?: KProductRowAction[]
-}
-
-export const KProductListItemDefaultProps = {
-	item: {
-		type: Object as PropType<KProductItemData>,
-		required: true as const,
-	},
-	rowActions: {
-		type: Array as PropType<KProductRowAction[]>,
-		default: () => [],
-	},
-}
-
-export function useKProductListItemLogic(props: KProductListItemProps) {
-	const hasActions = computed(() => props.rowActions && props.rowActions.length > 0)
-
-	const formattedPrice = computed(() => {
-		if (props.item.price === undefined) return ''
-		return new Intl.NumberFormat('en-US', {
-			style: 'currency',
-			currency: props.item.currency || 'USD'
-		}).format(props.item.price)
-	})
-
-	return {
-		hasActions,
-		formattedPrice
-	}
-}

package/src/runtime/components/KProductListItem/KProductListItem.vue

@@ -1,129 +0,0 @@
-<template lang="pug">
-.k-product-list-item
-	.item-image(v-if="item.image")
-		img(:src="item.image" :alt="item.title")
-	.item-image-placeholder(v-else)
-		KIcon(name="tabler:photo" class="placeholder-icon")
-	.item-details
-		h3.item-title {{ item.title }}
-		p.item-description(v-if="item.description") {{ item.description }}
-		.item-price(v-if="formattedPrice") {{ formattedPrice }}
-	.item-actions(v-if="hasActions")
-		KButton(
-			v-for="(action, index) in rowActions" 
-			:key="index" 
-			:class="action.color || 'primary'" 
-			@click="action.action(item)"
-		) 
-			template(v-if="action.icon" #icon)
-				KIcon(:name="action.icon")
-			| {{ action.label }}
-</template>
-
-<script lang="ts" setup>
-import type { KProductItemData, KProductRowAction } from '@katlux/providers'
-
-const props = defineProps<{
-	item: KProductItemData
-	rowActions?: KProductRowAction[]
-}>()
-
-import { useKProductListItemLogic } from './KProductListItem.logic'
-const { hasActions, formattedPrice } = useKProductListItemLogic(props)
-</script>
-
-<style lang="scss" scoped>
-.k-product-list-item {
-	display: flex;
-	flex-direction: column;
-	border: 1px solid var(--border-color-light, #e9ecef);
-	border-radius: var(--border-radius-md, 8px);
-	overflow: hidden;
-	background: var(--bg-color-surface, #ffffff);
-	transition: box-shadow 0.2s ease, transform 0.2s ease;
-	height: 100%;
-	
-	&:hover {
-		box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.08));
-		transform: translateY(-2px);
-	}
-
-	.item-image, .item-image-placeholder {
-		width: 100%;
-		aspect-ratio: 1;
-		overflow: hidden;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: var(--bg-color-muted, #f8f9fa);
-		border-bottom: 1px solid var(--border-color-light, #e9ecef);
-	}
-
-	.item-image img {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-		transition: transform 0.3s ease;
-	}
-
-	&:hover .item-image img {
-		transform: scale(1.05);
-	}
-
-	.item-image-placeholder {
-		.placeholder-icon {
-			font-size: 3rem;
-			color: var(--text-color-muted, #adb5bd);
-			opacity: 0.5;
-		}
-	}
-
-	.item-details {
-		padding: var(--gap-md, 16px);
-		flex-grow: 1;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.item-title {
-		margin: 0 0 var(--gap-xs, 4px) 0;
-		font-size: var(--font-size-lg, 1.1rem);
-		font-weight: 600;
-		color: var(--text-color-primary, #212529);
-		line-height: 1.3;
-	}
-
-	.item-description {
-		margin: 0 0 var(--gap-sm, 8px) 0;
-		font-size: var(--font-size-sm, 0.9rem);
-		color: var(--text-color-secondary, #6c757d);
-		line-height: 1.4;
-		flex-grow: 1;
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-	}
-
-	.item-price {
-		font-size: var(--font-size-xl, 1.25rem);
-		font-weight: 700;
-		color: var(--color-primary, #0d6efd);
-		margin-top: auto;
-		padding-top: var(--gap-sm, 8px);
-	}
-
-	.item-actions {
-		padding: var(--gap-md, 16px);
-		padding-top: 0;
-		display: flex;
-		gap: var(--gap-sm, 8px);
-		flex-wrap: wrap;
-		
-		:deep(.KButton) {
-			flex: 1;
-			min-width: 100px;
-		}
-	}
-}
-</style>