ketekny-ui-kit 1.0.77 → 1.0.78

package/README.md

@@ -1,4 +1,4 @@
-# ketekny-ui-kit
+# ketekny-ui-kit
 
 Vue 3 UI component library with Tailwind CSS styling and utility plugins.
 
@@ -45,6 +45,7 @@ import {
   kSelect,
   kDateSelector,
   kToggle,
+  kCheckbox,
   toastPlugin,
   confirmPlugin,
   alertPlugin,
@@ -59,6 +60,7 @@ app.component("kInput", kInput);
 app.component("kSelect", kSelect);
 app.component("kDateSelector", kDateSelector);
 app.component("kToggle", kToggle);
+app.component("kCheckbox", kCheckbox);
 
 app.use(toastPlugin);
 app.use(confirmPlugin);
@@ -159,7 +161,7 @@ Components:
 - `kMessage`, `kCode`, `kToolbar`, `kTable`, `kTabs`, `kChip`
 - `kSpinner`, `kDatatable`, `kIcon`, `kMenu`, `kSkeleton`
 - `kProgressBar`, `kPagination`, `kTree`, `kButton`, `kSelect`, `kUploader`
-- `kToggle`, `kInput`, `kDateSelector`, `kEditor`
+- `kToggle`, `kCheckbox`, `kInput`, `kDateSelector`, `kEditor`
 - `kSelectButton`, `kTags`, `kSearch`, `kArrayList`, `kList`, `kTextArea`
 - `kDialog`, `kDrawer`
 - `kAppHeader`, `kAppFooter`, `kAppMain`, `kHero`
@@ -199,3 +201,5 @@ ISC
 
 - Live demo/docs: https://ui.ketekny.gr
 - npm: https://www.npmjs.com/package/ketekny-ui-kit
+
+

package/index.js

@@ -1,6 +1,7 @@
-// UI Components
+// UI Components
 import kMessage from './src/ui/kMessage.vue'
 import kButton from './src/ui/kButton.vue'
+import kCheckbox from './src/ui/kCheckbox.vue'
 import kChip from './src/ui/kChip.vue'
 import kCode from './src/ui/kCode.vue'
 import kDialog from './src/ui/kDialog.vue'
@@ -52,7 +53,7 @@ export {
   kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
 
   // Form Components
-  kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
+  kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea,
 
   // Dialogs
   kDialog, kDrawer,
@@ -66,3 +67,4 @@ export {
   // Tailwind Config
   tailwindPreset
 }
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ketekny-ui-kit",
   "type": "module",
-  "version": "1.0.77",
+  "version": "1.0.78",
   "description": "A Vue 3 UI component library with Tailwind CSS styling",
   "main": "index.js",
   "files": [

package/src/ui/kCheckbox.vue

@@ -0,0 +1,143 @@
+<template>
+  <button
+    type="button"
+    class="admin-checkbox flex w-full items-center gap-2.5 rounded-2xl px-3 py-2 transition"
+    :class="[themeTextClass, isActive ? activeTextClass : inactiveTextClass, combinedContainerClass]"
+    :title="hoverCaption"
+    :aria-label="hoverCaption || label || 'Checkbox'"
+    @click="toggle"
+  >
+    <span
+      class="inline-flex shrink-0 items-center justify-center rounded-[6px] transition-colors"
+      :style="{ width: `${iconBoxSize}px`, height: `${iconBoxSize}px` }"
+      :class="isActive ? activeClass : inactiveClass"
+    >
+      <Check :size="iconSize" />
+    </span>
+    <span class="min-w-0 flex-1 text-left">
+      <span
+        class="block text-sm font-semibold leading-5"
+        :class="[truncateLabel ? 'truncate' : 'break-words', labelClass]"
+      >
+        {{ label }}
+      </span>
+      <span v-if="description" class="mt-0.5 block text-[11px] leading-4" :class="descriptionTextClass">
+        {{ description }}
+      </span>
+    </span>
+  </button>
+</template>
+
+<script>
+import { Check } from '@lucide/vue'
+
+export default {
+  name: 'kCheckbox',
+  components: { Check },
+  props: {
+    containerClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    labelClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    theme: {
+      type: String,
+      default: 'light',
+      validator: (value) => ['light', 'dark'].includes(String(value || '').trim().toLowerCase()),
+    },
+    hoverClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    descriptionClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    activeTextClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    inactiveTextClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    iconSize: {
+      type: Number,
+      default: 14,
+    },
+    iconBoxSize: {
+      type: Number,
+      default: 24,
+    },
+    truncateLabel: {
+      type: Boolean,
+      default: false,
+    },
+    modelValue: {
+      type: Boolean,
+      default: undefined,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    caption: {
+      type: String,
+      default: '',
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+  },
+  emits: ['click', 'update:modelValue'],
+  computed: {
+    isActive() {
+      return this.modelValue === true
+    },
+    hoverCaption() {
+      const explicitCaption = String(this.caption || '').trim()
+      if (explicitCaption) return explicitCaption
+      if (this.truncateLabel) return String(this.label || '').trim()
+      return ''
+    },
+    themeTextClass() {
+      return this.theme === 'dark' ? 'text-slate-100 hover:text-white' : 'text-slate-700 hover:text-slate-900'
+    },
+    themeHoverClass() {
+      return this.theme === 'dark' ? 'hover:bg-white/5' : 'hover:bg-slate-50'
+    },
+    themeDescriptionClass() {
+      return this.theme === 'dark' ? 'text-slate-300' : 'text-slate-500'
+    },
+    themeActiveClass() {
+      return this.theme === 'dark' ? 'bg-cyan-400 text-cyan-950' : 'bg-sky-600 text-white'
+    },
+    themeInactiveClass() {
+      return this.theme === 'dark' ? 'bg-white/10 text-transparent' : 'bg-slate-200 text-transparent'
+    },
+    combinedContainerClass() {
+      return [this.themeHoverClass, this.hoverClass, this.containerClass]
+    },
+    activeClass() {
+      return this.themeActiveClass
+    },
+    inactiveClass() {
+      return this.themeInactiveClass
+    },
+    descriptionTextClass() {
+      return this.descriptionClass || this.themeDescriptionClass
+    },
+  },
+  methods: {
+    toggle() {
+      const nextValue = !this.isActive
+      this.$emit('update:modelValue', nextValue)
+      this.$emit('click', nextValue)
+    },
+  },
+}
+</script>