@katlux/toolkit 0.1.0-beta.5 → 0.1.0-beta.50

package/dist/runtime/presets/default/components/KPagination/KPagination.vue

@@ -23,48 +23,50 @@
 			KButton(@click="goToNext" :href="getPageHref(dp.currentPage.value + 1)" size="small" variant="outline") ›
 </template>
 
-<script setup>
-import { computed } from "vue";
-const props = defineProps({
-  dp: { type: null, required: true },
-  totalPages: { type: Number, required: true },
-  getPageHref: { type: Function, required: true },
-  visiblePages: { type: Array, required: true },
-  showPrevButton: { type: Boolean, required: true },
-  showNextButton: { type: Boolean, required: true },
-  showFirstEllipsis: { type: Boolean, required: true },
-  showLastEllipsis: { type: Boolean, required: true },
-  pageClicked: { type: Function, required: true },
-  goToPrev: { type: Function, required: true },
-  goToNext: { type: Function, required: true },
-  goToFirst: { type: Function, required: true },
-  goToLast: { type: Function, required: true }
-});
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+	dp: any
+	totalPages: number
+	getPageHref: (page: number) => string | undefined
+	visiblePages: number[]
+	showPrevButton: boolean
+	showNextButton: boolean
+	showFirstEllipsis: boolean
+	showLastEllipsis: boolean
+	pageClicked: (item: number) => void
+	goToPrev: () => void
+	goToNext: () => void
+	goToFirst: () => void
+	goToLast: () => void
+}>()
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .k-pagination {
-  text-align: right;
-}
-.k-pagination ul {
-  list-style-type: none;
-  padding: 0px;
-  margin: 0px;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-content: center;
-  justify-content: flex-end;
-  gap: 5px;
-}
-.k-pagination ul li {
-  display: flex;
-  align-items: center;
-}
-.k-pagination ul li .ellipsis {
-  padding: 8px 12px;
-  color: #666;
-  font-weight: bold;
-  user-select: none;
+	text-align: right;
+	ul {
+		list-style-type: none;
+		padding: 0px;
+		margin: 0px;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-content: center;
+		justify-content: flex-end;
+		gap: 5px;
+		li {
+			display: flex;
+			align-items: center;
+
+			.ellipsis {
+				padding: 8px 12px;
+				color: #666;
+				font-weight: bold;
+				user-select: none;
+			}
+		}
+	}
 }
 </style>

package/dist/runtime/presets/default/components/KPanel/KPanel.d.vue.ts

@@ -2,8 +2,11 @@ type __VLS_Props = {
     noGap?: boolean;
     flexContent?: boolean;
     scrollable?: boolean;
+    type?: 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info';
+    title?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "default" | "primary" | "danger" | "success" | "warning" | "info";
     noGap: boolean;
     flexContent: boolean;
     scrollable: boolean;

package/dist/runtime/presets/default/components/KPanel/KPanel.vue

@@ -1,47 +1,108 @@
 <template lang="pug">
-.KPanel
+.KPanel(:class="[`type-${type}`]")
 	KGrid(direction="column" align="strech" :no-gap="noGap" wrap="nowrap").full-height
-		.KPanel--header(v-if="$slots.header")
-			slot(name="header")
+		.KPanel--header(v-if="$slots.header || title")
+			slot(name="header") {{ title }}
 		.KPanel--content(:class="{'flex-content': flexContent, 'scrollable': scrollable}")
 			slot
 		.KPanel--footer(v-if="$slots.footer")
 			slot(name="footer")
 </template>
 
-<script setup>
-const props = defineProps({
-  noGap: { type: Boolean, required: false, default: false },
-  flexContent: { type: Boolean, required: false, default: false },
-  scrollable: { type: Boolean, required: false, default: false }
-});
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{
+	noGap?: boolean
+	flexContent?: boolean
+	scrollable?: boolean
+	type?: 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info'
+	title?: string
+}>(), {
+	scrollable: false,
+	noGap: true,
+	flexContent: false,
+	type: 'default'
+})
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KPanel {
-  border-radius: var(--box-border-radius);
-  border: var(--box-border);
-  box-shadow: var(--box-shadow);
-  background-color: var(--background-color-light);
-  width: 100%;
-}
-.KPanel .full-height {
-  height: 100%;
-}
-.KPanel--header {
-  padding: var(--component-gap);
-  background-color: var(--background-color-medium);
-}
-.KPanel--content {
-  padding: var(--box-padding);
-}
-.KPanel--content.scrollable {
-  overflow-y: auto;
-}
-.KPanel--content.flex-content {
-  flex-grow: 1;
-}
-.KPanel--footer {
-  padding: var(--box-padding);
+	--current-panel-bg: var(--panel-bg-default);
+	--current-panel-header-bg: var(--panel-header-bg-default);
+	--current-panel-footer-bg: var(--panel-footer-bg-default);
+
+	border-radius: var(--border-radius-lg);
+	border: 1px solid var(--neutral-200);
+	box-shadow: var(--shadow-md);
+	background-color: color-mix(in srgb, var(--current-panel-bg), transparent calc((1 - var(--panel-bg-opacity)) * 100%));
+	backdrop-filter: blur(var(--panel-blur));
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	transition: transform var(--transition-normal), box-shadow var(--transition-normal);
+
+	&.type-primary {
+		--current-panel-bg: var(--panel-bg-primary);
+		--current-panel-header-bg: var(--panel-header-bg-primary);
+		--current-panel-footer-bg: var(--panel-footer-bg-primary);
+	}
+	&.type-success {
+		--current-panel-bg: var(--panel-bg-success);
+		--current-panel-header-bg: var(--panel-header-bg-success);
+		--current-panel-footer-bg: var(--panel-footer-bg-success);
+	}
+	&.type-warning {
+		--current-panel-bg: var(--panel-bg-warning);
+		--current-panel-header-bg: var(--panel-header-bg-warning);
+		--current-panel-footer-bg: var(--panel-footer-bg-warning);
+	}
+	&.type-danger {
+		--current-panel-bg: var(--panel-bg-danger);
+		--current-panel-header-bg: var(--panel-header-bg-danger);
+		--current-panel-footer-bg: var(--panel-footer-bg-danger);
+	}
+	&.type-info {
+		--current-panel-bg: var(--panel-bg-info);
+		--current-panel-header-bg: var(--panel-header-bg-info);
+		--current-panel-footer-bg: var(--panel-footer-bg-info);
+	}
+
+	&:hover {
+		transform: translateY(-2px);
+		box-shadow: var(--shadow-lg);
+	}
+
+	.full-height {
+		height: 100%;
+	}
+
+	&--header {
+		padding: var(--gap-md);
+		background-color: color-mix(in srgb, var(--current-panel-header-bg), transparent 92%);
+		border-bottom: 1px solid var(--neutral-200);
+		font-weight: var(--font-weight-semibold);
+		color: var(--font-color-heading);
+		font-size: var(--font-size-lg);
+	}
+
+	&--content {
+		padding: var(--gap-md);
+		flex: 1;
+		
+		&.scrollable {
+			overflow-y: auto;
+		}
+
+		&.flex-content {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
+	&--footer {
+		padding: var(--gap-md);
+		background-color: color-mix(in srgb, var(--current-panel-footer-bg), transparent 92%);
+		border-top: 1px solid var(--neutral-200);
+	}
 }
 </style>

package/dist/runtime/presets/default/components/KPanel/KPanel.vue.d.ts

@@ -2,8 +2,11 @@ type __VLS_Props = {
     noGap?: boolean;
     flexContent?: boolean;
     scrollable?: boolean;
+    type?: 'default' | 'primary' | 'danger' | 'success' | 'warning' | 'info';
+    title?: string;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    type: "default" | "primary" | "danger" | "success" | "warning" | "info";
     noGap: boolean;
     flexContent: boolean;
     scrollable: boolean;

package/dist/runtime/presets/default/components/KRadiobox/KRadiobox.vue

@@ -7,37 +7,38 @@ label.KRadiobox
 		slot
 </template>
 
-<script setup>
-defineProps({
-  model: { type: null, required: true },
-  label: { type: String, required: false },
-  value: { type: String, required: false },
-  disabled: { type: Boolean, required: false }
-});
-const model = defineModel();
+<script lang="ts" setup>
+defineProps<{
+	model: any
+	label?: string
+	value?: string
+	disabled?: boolean
+}>()
+
+const model = defineModel()
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .KRadiobox {
-  display: flex;
-  gap: 5px;
-}
-.KRadiobox input {
-  display: none;
-}
-.KRadiobox .icon-container {
-  border: var(--input-border);
-  width: var(--box-padding);
-  height: var(--box-padding);
-  text-align: center;
-  line-height: var(--box-padding);
-  border-radius: var(--input-border-radius);
-  background-color: var(--checkbox-bg);
-}
-.KRadiobox .icon {
-  display: none;
-}
-.KRadiobox :checked + .icon-container > .icon {
-  display: block;
+	display: flex;
+	gap: 5px;
+	input {
+		display: none;
+	}
+	.icon-container {
+		border: var(--input-border);
+		width: var(--box-padding);
+		height: var(--box-padding);
+		text-align: center;
+		line-height: var(--box-padding);
+		border-radius: var(--input-border-radius);
+		background-color: var(--checkbox-bg);
+	}
+	.icon {
+		display: none;
+	}
+	:checked + .icon-container > .icon {
+		display: block;
+	}
 }
 </style>

package/dist/runtime/presets/default/components/KRangeSlider/KRangeSlider.vue

@@ -23,134 +23,167 @@
 		)
 </template>
 
-<script setup>
-import { computed } from "vue";
-const props = defineProps({
-  rangeMin: { type: Number, required: true },
-  rangeMax: { type: Number, required: true },
-  rangeStep: { type: Number, required: true },
-  isDisabled: { type: Boolean, required: true },
-  currentMinValue: { type: Number, required: true },
-  currentMaxValue: { type: Number, required: true },
-  minPercent: { type: Number, required: true },
-  maxPercent: { type: Number, required: true }
-});
-const emit = defineEmits(["update:minValue", "update:maxValue"]);
-const updateMinValue = (event) => {
-  const value = parseFloat(event.target.value);
-  if (value <= props.currentMaxValue) {
-    emit("update:minValue", value);
-  }
-};
-const updateMaxValue = (event) => {
-  const value = parseFloat(event.target.value);
-  if (value >= props.currentMinValue) {
-    emit("update:maxValue", value);
-  }
-};
-const handleTrackClick = (event) => {
-  if (props.isDisabled) return;
-  const target = event.currentTarget;
-  const rect = target.getBoundingClientRect();
-  const clickX = event.clientX - rect.left;
-  const percentage = clickX / rect.width;
-  const rawValue = props.rangeMin + percentage * (props.rangeMax - props.rangeMin);
-  const steppedValue = Math.round(rawValue / props.rangeStep) * props.rangeStep;
-  const value = Math.max(props.rangeMin, Math.min(props.rangeMax, steppedValue));
-  const distanceToMin = Math.abs(value - props.currentMinValue);
-  const distanceToMax = Math.abs(value - props.currentMaxValue);
-  if (distanceToMin < distanceToMax) {
-    if (value <= props.currentMaxValue) {
-      emit("update:minValue", value);
-    }
-  } else {
-    if (value >= props.currentMinValue) {
-      emit("update:maxValue", value);
-    }
-  }
-};
-</script>
+<script lang="ts" setup>
+import { computed } from 'vue'
 
-<style scoped>
-.KRangeSlider {
-  position: relative;
-  padding: 20px 0;
-}
-.KRangeSlider.disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.KRangeSlider .slider-container {
-  position: relative;
-  height: 6px;
-  cursor: pointer;
-}
-.KRangeSlider .slider-track {
-  position: absolute;
-  width: 100%;
-  height: 6px;
-  background-color: var(--neutral-200);
-  border-radius: 3px;
-}
-.KRangeSlider .slider-range {
-  position: absolute;
-  height: 6px;
-  background-color: var(--primary-500);
-  border-radius: 3px;
-  z-index: 1;
-}
-.KRangeSlider .slider-input {
-  position: absolute;
-  width: 100%;
-  height: 1px;
-  background: transparent;
-  pointer-events: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-.KRangeSlider .slider-input::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  background-color: var(--primary-500);
-  border: 2px solid white;
-  border-radius: 50%;
-  cursor: pointer;
-  pointer-events: auto;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  transition: transform 0.15s ease;
-}
-.KRangeSlider .slider-input::-webkit-slider-thumb:hover {
-  transform: scale(1.15);
-}
-.KRangeSlider .slider-input::-moz-range-thumb {
-  width: 18px;
-  height: 18px;
-  background-color: var(--primary-500);
-  border: 2px solid white;
-  border-radius: 50%;
-  cursor: pointer;
-  pointer-events: auto;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  transition: transform 0.15s ease;
-}
-.KRangeSlider .slider-input::-moz-range-thumb:hover {
-  transform: scale(1.15);
-}
-.KRangeSlider .slider-input:disabled {
-  cursor: not-allowed;
-}
-.KRangeSlider .slider-input:disabled::-webkit-slider-thumb {
-  cursor: not-allowed;
+// Default template for KRangeSlider
+const props = defineProps<{
+	rangeMin: number
+	rangeMax: number
+	rangeStep: number
+	isDisabled: boolean
+	currentMinValue: number
+	currentMaxValue: number
+	minPercent: number
+	maxPercent: number
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:minValue', value: number): void
+	(e: 'update:maxValue', value: number): void
+}>()
+
+const updateMinValue = (event: Event) => {
+	const value = parseFloat((event.target as HTMLInputElement).value)
+	// Ensure min doesn't exceed max
+	if (value <= props.currentMaxValue) {
+		emit('update:minValue', value)
+	}
 }
-.KRangeSlider .slider-input:disabled::-moz-range-thumb {
-  cursor: not-allowed;
+
+const updateMaxValue = (event: Event) => {
+	const value = parseFloat((event.target as HTMLInputElement).value)
+	// Ensure max doesn't go below min
+	if (value >= props.currentMinValue) {
+		emit('update:maxValue', value)
+	}
 }
-.KRangeSlider .slider-min {
-  z-index: 3;
+
+const handleTrackClick = (event: MouseEvent) => {
+	if (props.isDisabled) return
+	
+	const target = event.currentTarget as HTMLElement
+	const rect = target.getBoundingClientRect()
+	const clickX = event.clientX - rect.left
+	const percentage = clickX / rect.width
+	const rawValue = props.rangeMin + (percentage * (props.rangeMax - props.rangeMin))
+	
+	// Round to step
+	const steppedValue = Math.round(rawValue / props.rangeStep) * props.rangeStep
+	const value = Math.max(props.rangeMin, Math.min(props.rangeMax, steppedValue))
+	
+	// Determine which handle is closer
+	const distanceToMin = Math.abs(value - props.currentMinValue)
+	const distanceToMax = Math.abs(value - props.currentMaxValue)
+	
+	if (distanceToMin < distanceToMax) {
+		// Move min handle
+		if (value <= props.currentMaxValue) {
+			emit('update:minValue', value)
+		}
+	} else {
+		// Move max handle
+		if (value >= props.currentMinValue) {
+			emit('update:maxValue', value)
+		}
+	}
 }
-.KRangeSlider .slider-max {
-  z-index: 4;
+</script>
+
+<style lang="scss" scoped>
+.KRangeSlider {
+	position: relative;
+	padding: 20px 0;
+	
+	&.disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+	
+	.slider-container {
+		position: relative;
+		height: 6px;
+		cursor: pointer;
+	}
+	
+	.slider-track {
+		position: absolute;
+		width: 100%;
+		height: 6px;
+		background-color: var(--neutral-200);
+		border-radius: 3px;
+	}
+	
+	.slider-range {
+		position: absolute;
+		height: 6px;
+		background-color: var(--primary-500);
+		border-radius: 3px;
+		z-index: 1;
+	}
+	
+	.slider-input {
+		position: absolute;
+		width: 100%;
+		height: 1px;
+		background: transparent;
+		pointer-events: none;
+		-webkit-appearance: none;
+		appearance: none;
+		
+		&::-webkit-slider-thumb {
+			-webkit-appearance: none;
+			appearance: none;
+			width: 18px;
+			height: 18px;
+			background-color: var(--primary-500);
+			border: 2px solid white;
+			border-radius: 50%;
+			cursor: pointer;
+			pointer-events: auto;
+			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+			transition: transform 0.15s ease;
+			
+			&:hover {
+				transform: scale(1.15);
+			}
+		}
+		
+		&::-moz-range-thumb {
+			width: 18px;
+			height: 18px;
+			background-color: var(--primary-500);
+			border: 2px solid white;
+			border-radius: 50%;
+			cursor: pointer;
+			pointer-events: auto;
+			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+			transition: transform 0.15s ease;
+			
+			&:hover {
+				transform: scale(1.15);
+			}
+		}
+		
+		&:disabled {
+			cursor: not-allowed;
+			
+			&::-webkit-slider-thumb {
+				cursor: not-allowed;
+			}
+			
+			&::-moz-range-thumb {
+				cursor: not-allowed;
+			}
+		}
+	}
+	
+	.slider-min {
+		z-index: 3;
+	}
+	
+	.slider-max {
+		z-index: 4;
+	}
 }
 </style>