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

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

@@ -8,31 +8,38 @@
 	.info Selected {{props.selectedRows.length}} items
 </template>
 
-<script setup>
-import { computed } from "vue";
-import { CFlatClientDataProvider } from "@katlux/providers";
-const props = defineProps({
-  bulkActions: { type: Array, required: true },
-  selectedRows: { type: Array, required: true },
-  selectAll: { type: Boolean, required: true },
-  selected: { type: null, required: true },
-  dp: { type: Object, required: true },
-  doAction: { type: Function, required: true }
-});
-const emit = defineEmits(["update:selected"]);
+<script setup lang="ts">
+import { computed } from 'vue'
+import { CFlatClientDataProvider } from '@katlux/providers'
+import type { IKDatatableAction } from '@katlux/providers'
+
+const props = defineProps<{
+	bulkActions: IKDatatableAction[]
+	selectedRows: any[]
+	selectAll: boolean
+	selected: any
+	dp: CFlatClientDataProvider
+	doAction: (action: any) => void
+}>()
+
+const emit = defineEmits<{
+	(e: 'update:selected', value: any): void
+}>()
+
 const internalSelected = computed({
-  get: () => props.selected,
-  set: (val) => emit("update:selected", val)
-});
+	get: () => props.selected,
+	set: (val) => emit('update:selected', val)
+})
+
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .k-bulk-actions {
-  display: flex;
-  gap: 10px;
-}
-.k-bulk-actions .info {
-  display: flex;
-  align-items: center;
+	display: flex;
+	gap: 10px;
+	.info {
+		display: flex;
+		align-items: center;
+	}
 }
 </style>

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

@@ -9,436 +9,155 @@ button.KButton(v-else @click="onClick" :class="buttonClasses" :disabled="isDisab
 	span.loading(v-if="loading")
 </template>
 
-<script setup>
-defineProps({
-  isLink: { type: Boolean, required: true },
-  isDisabled: { type: Boolean, required: true },
-  buttonClasses: { type: null, required: true },
-  onClick: { type: Function, required: true },
-  href: { type: String, required: false },
-  loading: { type: Boolean, required: false }
-});
+<script lang="ts" setup>
+// Default template for KButton
+defineProps<{
+	isLink: boolean
+	isDisabled: boolean
+	buttonClasses: any
+	onClick: () => void
+	href?: string
+	loading?: boolean
+}>()
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+@use "../../assets/scss/mixins.scss" as mixins;
 .KButton {
-  border-radius: var(--button-border-radius);
-  font-weight: 400;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  border: 1px solid;
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  text-decoration: none;
-}
-.KButton:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-.KButton.default {
-  background-color: var(--neutral-900);
-  border-color: var(--neutral-900);
-  color: var(--font-color-light);
-}
-.KButton.default .loading {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 1s linear infinite;
-}
-.KButton.default .loading::before {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 1px solid var(--neutral-50);
-  animation: prixClipFix 2s linear infinite;
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes prixClipFix {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
-  }
-}
-.KButton.primary {
-  background-color: var(--button-bg-primary);
-  border-color: var(--button-bg-primary);
-  color: var(--button-text-primary);
-}
-.KButton.primary .loading {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 1s linear infinite;
-}
-.KButton.primary .loading::before {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 1px solid var(--neutral-50);
-  animation: prixClipFix 2s linear infinite;
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes prixClipFix {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
-  }
-}
-.KButton.danger {
-  background-color: var(--button-bg-danger);
-  border-color: var(--button-bg-danger);
-  color: var(--button-text-danger);
-}
-.KButton.danger .loading {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 1s linear infinite;
-}
-.KButton.danger .loading::before {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 1px solid var(--neutral-50);
-  animation: prixClipFix 2s linear infinite;
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes prixClipFix {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
-  }
-}
-.KButton.success {
-  background-color: var(--button-bg-success);
-  border-color: var(--button-bg-success);
-  color: var(--button-text-success);
-}
-.KButton.success .loading {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 1s linear infinite;
-}
-.KButton.success .loading::before {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 1px solid var(--neutral-50);
-  animation: prixClipFix 2s linear infinite;
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes prixClipFix {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
-  }
-}
-.KButton.warning {
-  background-color: var(--button-bg-warning);
-  border-color: var(--button-bg-warning);
-  color: var(--button-text-warning);
-}
-.KButton.warning .loading {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 1s linear infinite;
-}
-.KButton.warning .loading::before {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 1px solid var(--neutral-800);
-  animation: prixClipFix 2s linear infinite;
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes prixClipFix {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
-  }
-}
-.KButton.info {
-  background-color: var(--button-bg-info);
-  border-color: var(--button-bg-info);
-  color: var(--button-text-info);
-}
-.KButton.info .loading {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 1s linear infinite;
-}
-.KButton.info .loading::before {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 1px solid var(--neutral-50);
-  animation: prixClipFix 2s linear infinite;
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes prixClipFix {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
-  }
-}
-.KButton.light {
-  background-color: var(--button-bg-light);
-  border-color: var(--button-bg-light);
-  color: var(--button-text-light);
-}
-.KButton.light .loading {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 1s linear infinite;
-}
-.KButton.light .loading::before {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 1px solid var(--neutral-800);
-  animation: prixClipFix 2s linear infinite;
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes prixClipFix {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
-  }
-}
-.KButton.dark {
-  background-color: var(--button-bg-dark);
-  border-color: var(--button-bg-dark);
-  color: var(--button-text-dark);
-}
-.KButton.dark .loading {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  position: relative;
-  animation: rotate 1s linear infinite;
-}
-.KButton.dark .loading::before {
-  content: "";
-  box-sizing: border-box;
-  position: absolute;
-  inset: 0px;
-  border-radius: 50%;
-  border: 1px solid var(--neutral-50);
-  animation: prixClipFix 2s linear infinite;
-}
-@keyframes rotate {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-@keyframes prixClipFix {
-  0% {
-    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
-  }
-  25% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
-  }
-  50% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
-  }
-  75% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
-  }
-  100% {
-    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
-  }
-}
-.KButton:hover.default {
-  background-color: var(--neutral-700);
-  border-color: var(--neutral-700);
-  color: var(--font-color-light);
-}
-.KButton:hover.primary {
-  background-color: var(--button-hover-bg-primary);
-  border-color: var(--button-hover-bg-primary);
-  color: var(--button-hover-text-primary);
-}
-.KButton:hover.danger {
-  background-color: var(--button-hover-bg-danger);
-  border-color: var(--button-hover-bg-danger);
-  color: var(--button-hover-text-danger);
-}
-.KButton:hover.success {
-  background-color: var(--button-hover-bg-success);
-  border-color: var(--button-hover-bg-success);
-  color: var(--button-hover-text-success);
-}
-.KButton:hover.warning {
-  background-color: var(--button-hover-bg-warning);
-  border-color: var(--button-hover-bg-warning);
-  color: var(--button-hover-text-warning);
-}
-.KButton:hover.info {
-  background-color: var(--button-hover-bg-info);
-  border-color: var(--button-hover-bg-info);
-  color: var(--button-hover-text-info);
-}
-.KButton:hover.light {
-  background-color: var(--button-hover-bg-light);
-  border-color: var(--button-hover-bg-light);
-  color: var(--button-hover-text-light);
-}
-.KButton:hover.dark {
-  background-color: var(--button-hover-bg-dark);
-  border-color: var(--button-hover-bg-dark);
-  color: var(--button-hover-text-dark);
-}
-.KButton.large {
-  font-size: var(--button-font-size-lg);
-  padding: 15px 30px;
-}
-.KButton.medium {
-  font-size: var(--button-font-size-md);
-  padding: 10px 20px;
-}
-.KButton.small {
-  font-size: var(--button-font-size-md);
-  padding: 5px 10px;
+	border-radius: var(--button-border-radius);
+	font-weight: 400;
+	cursor: pointer;
+	transition: all 0.3s ease;
+	border: 1px solid;
+	display: inline-flex;
+	gap: 10px;
+	align-items: center;
+	text-decoration: none;
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		pointer-events: none;
+	}
+
+	&.default {
+		background-color: var(--neutral-900);
+		border-color: var(--neutral-900);
+		color: var(--font-color-light);
+		.loading {
+			@include mixins.loading-animation($size: 10px, $color: light);
+		}
+	}
+	&.primary {
+		background-color: var(--button-bg-primary);
+		border-color: var(--button-bg-primary);
+		color: var(--button-text-primary);
+		.loading {
+			@include mixins.loading-animation($size: 10px, $color: light);
+		}
+	}
+	&.danger {
+		background-color: var(--button-bg-danger);
+		border-color: var(--button-bg-danger);
+		color: var(--button-text-danger);
+		.loading {
+			@include mixins.loading-animation($size: 10px, $color: light);
+		}
+	}
+	&.success {
+		background-color: var(--button-bg-success);
+		border-color: var(--button-bg-success);
+		color: var(--button-text-success);
+		.loading {
+			@include mixins.loading-animation($size: 10px, $color: light);
+		}
+	}
+	&.warning {
+		background-color: var(--button-bg-warning);
+		border-color: var(--button-bg-warning);
+		color: var(--button-text-warning);
+		.loading {
+			@include mixins.loading-animation($size: 10px, $color: dark);
+		}
+	}
+	&.info {
+		background-color: var(--button-bg-info);
+		border-color: var(--button-bg-info);
+		color: var(--button-text-info);
+		.loading {
+			@include mixins.loading-animation($size: 10px, $color: light);
+		}
+	}
+	&.light {
+		background-color: var(--button-bg-light);
+		border-color: var(--button-bg-light);
+		color: var(--button-text-light);
+		.loading {
+			@include mixins.loading-animation($size: 10px, $color: dark);
+		}
+	}
+	&.dark {
+		background-color: var(--button-bg-dark);
+		border-color: var(--button-bg-dark);
+		color: var(--button-text-dark);
+		.loading {
+			@include mixins.loading-animation($size: 10px, $color: light);
+		}
+	}
+	&:hover {
+		&.default {
+			background-color: var(--neutral-700);
+			border-color: var(--neutral-700);
+			color: var(--font-color-light);
+		}
+		&.primary {
+			background-color: var(--button-hover-bg-primary);
+			border-color: var(--button-hover-bg-primary);
+			color: var(--button-hover-text-primary);
+		}
+		&.danger {
+			background-color: var(--button-hover-bg-danger);
+			border-color: var(--button-hover-bg-danger);
+			color: var(--button-hover-text-danger);
+		}
+		&.success {
+			background-color: var(--button-hover-bg-success);
+			border-color: var(--button-hover-bg-success);
+			color: var(--button-hover-text-success);
+		}
+		&.warning {
+			background-color: var(--button-hover-bg-warning);
+			border-color: var(--button-hover-bg-warning);
+			color: var(--button-hover-text-warning);
+		}
+		&.info {
+			background-color: var(--button-hover-bg-info);
+			border-color: var(--button-hover-bg-info);
+			color: var(--button-hover-text-info);
+		}
+		&.light {
+			background-color: var(--button-hover-bg-light);
+			border-color: var(--button-hover-bg-light);
+			color: var(--button-hover-text-light);
+		}
+		&.dark {
+			background-color: var(--button-hover-bg-dark);
+			border-color: var(--button-hover-bg-dark);
+			color: var(--button-hover-text-dark);
+		}
+	}
+
+	&.large {
+		font-size: var(--button-font-size-lg);
+		padding: 15px 30px;
+	}
+	&.medium {
+		font-size: var(--button-font-size-md);
+		padding: 10px 20px;
+	}
+	&.small {
+		font-size: var(--button-font-size-md);
+		padding: 5px 10px;
+	}
 }
 </style>