ketekny-ui-kit 1.0.9 → 1.0.11

package/index.js

@@ -23,6 +23,8 @@ import kTags from './src/ui/kTags.vue'
 import kSearch from './src/ui/kSearch.vue'
 import kArrayList from './src/ui/kArrayList.vue'
 import kSkeleton from './src/ui/kSkeleton.vue'
+import kProgressBar from './src/ui/kProgressBar.vue'
+import kTextArea from './src/ui/kTextArea.vue'
 
 // Layout Components
 import kAppHeader from './src/layout/kAppHeader.vue'
@@ -43,10 +45,10 @@ import tailwindPreset from './tailwind-preset.js'
 // Named exports (tree-shaking friendly)
 export {
   // UI Components
-  kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton,
+  kMessage, kCode, kToolbar, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar,
 
   // Form Components
-  kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList,
+  kButton, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kTextArea,
 
   // Dialogs
   kDialog, kDrawer,

package/package.json

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

package/src/ui/kProgressBar.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="w-full">
+    <div
+      class="relative w-full overflow-hidden rounded-full bg-slate-200"
+      :style="{ height: resolvedHeight }"
+      role="progressbar"
+      :aria-valuemin="0"
+      :aria-valuemax="max"
+      :aria-valuenow="safeValue"
+    >
+      <div
+        class="h-full transition-all duration-300 ease-out"
+        :class="barClass"
+        :style="{ width: `${percentage}%` }"
+      />
+      <span
+        v-if="showValue"
+        class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-slate-700"
+      >
+        {{ Math.round(percentage) }}%
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'kProgressBar',
+  props: {
+    value: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    height: { type: [String, Number], default: 8 },
+    color: {
+      type: String,
+      default: 'primary',
+      validator: (v) => ['primary', 'success', 'warning', 'danger', 'info'].includes(v),
+    },
+    striped: { type: Boolean, default: false },
+    animated: { type: Boolean, default: false },
+    showValue: { type: Boolean, default: false },
+  },
+  computed: {
+    safeMax() {
+      return Number(this.max) > 0 ? Number(this.max) : 100
+    },
+    safeValue() {
+      const inVal = Number(this.value)
+      if (!Number.isFinite(inVal)) return 0
+      return Math.min(Math.max(inVal, 0), this.safeMax)
+    },
+    percentage() {
+      return (this.safeValue / this.safeMax) * 100
+    },
+    resolvedHeight() {
+      return typeof this.height === 'number' ? `${this.height}px` : this.height
+    },
+    barClass() {
+      const palette = {
+        primary: 'bg-primary',
+        success: 'bg-green-600',
+        warning: 'bg-amber-500',
+        danger: 'bg-red-600',
+        info: 'bg-sky-600',
+      }
+      return [
+        palette[this.color] || palette.primary,
+        this.striped ? 'k-progress-striped' : '',
+        this.animated ? 'k-progress-animated' : '',
+      ]
+    },
+  },
+}
+</script>
+
+<style scoped>
+.k-progress-striped {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.25) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.25) 50%,
+    rgba(255, 255, 255, 0.25) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+}
+
+.k-progress-animated {
+  animation: k-progress-bar-stripes 0.9s linear infinite;
+}
+
+@keyframes k-progress-bar-stripes {
+  from {
+    background-position: 1rem 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+</style>

package/src/ui/kTable.vue

@@ -115,7 +115,7 @@ export default {
 }
 
 .table-custom--card th {
-  @apply px-6 py-4 text-xl font-semibold text-left text-white bg-primary border-b border-primary;
+  @apply px-6 py-4 text-lg font-semibold text-left text-white bg-primary border-b border-primary;
 }
 
 .table-custom--plain th {
@@ -127,7 +127,7 @@ export default {
 }
 
 .table-custom--card td {
-  @apply h-[4rem] px-6 py-4 text-lg text-slate-800;
+  @apply h-[3.2rem] px-6 py-4 text-base text-slate-800;
 }
 
 .table-custom--plain td {

package/src/ui/kTextArea.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="w-full">
+    <label
+      v-if="label != null"
+      :for="inputId"
+      class="inputLabel"
+      :class="hasError ? 'text-red-500' : 'text-gray-700'"
+    >
+      {{ label }}
+    </label>
+
+    <textarea
+      :id="inputId"
+      :value="computedModelValue"
+      @input="handleInput"
+      :rows="rows"
+      :disabled="disabled"
+      :placeholder="placeholder"
+      :autofocus="autofocus"
+      :class="textareaClass"
+      :aria-invalid="hasError ? 'true' : 'false'"
+      :aria-describedby="describedById"
+    />
+
+    <div :id="errorId" class="mt-1 text-red-500" v-if="hasError && error !== true && error !== ''">
+      {{ error }}
+    </div>
+
+    <div :id="infoId" class="mt-1 text-gray-500" v-if="info != null">
+      {{ info }}
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'kTextArea',
+  props: {
+    modelValue: [String, Number],
+    label: { type: String, default: null },
+    info: { type: String, default: null },
+    error: { type: [String, Boolean], default: null },
+    placeholder: { type: String, default: null },
+    disabled: { type: Boolean, default: false },
+    id: { type: String, default: null },
+    autofocus: { type: Boolean, default: false },
+    rows: { type: Number, default: 4 },
+    capsOnly: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      computedModelValue: '',
+      generatedId: `textarea-${Math.random().toString(36).slice(2, 11)}`,
+    }
+  },
+  computed: {
+    hasError() {
+      return this.error != null && this.error !== false
+    },
+    inputId() {
+      return this.id || this.generatedId
+    },
+    errorId() {
+      return `${this.inputId}-error`
+    },
+    infoId() {
+      return `${this.inputId}-info`
+    },
+    describedById() {
+      const ids = []
+      if (this.hasError && this.error !== true && this.error !== '') ids.push(this.errorId)
+      if (this.info != null) ids.push(this.infoId)
+      return ids.length ? ids.join(' ') : null
+    },
+    textareaClass() {
+      return [
+        'w-full px-3 py-2 border rounded-lg transition shadow-sm focus:outline-none text-gray-700 focus:ring-0 focus:border-green-500 bg-white placeholder-gray-400',
+        this.hasError ? 'border-red-500 focus:ring focus:ring-red-300' : '',
+        this.disabled ? '!bg-gray-100 !text-gray-400 !cursor-not-allowed' : '',
+      ]
+    },
+  },
+  created() {
+    this.init(this.modelValue)
+  },
+  watch: {
+    modelValue(val) {
+      this.init(val)
+    },
+  },
+  methods: {
+    init(val) {
+      this.computedModelValue = val ?? ''
+    },
+    handleInput(event) {
+      let val = event.target.value
+
+      if (typeof val === 'string' && this.capsOnly) {
+        val = val.normalize('NFD').replace(/\p{Diacritic}/gu, '')
+        val = val
+          .replace(/[άαΆΑ]/g, 'Α')
+          .replace(/[έεΈΕ]/g, 'Ε')
+          .replace(/[ήηΉΗ]/g, 'Η')
+          .replace(/[ίιΊΙϊΐ]/g, 'Ι')
+          .replace(/[όοΌΟ]/g, 'Ο')
+          .replace(/[ύυΎΫΰϋ]/g, 'Υ')
+          .replace(/[ώωΏΩ]/g, 'Ω')
+          .toUpperCase()
+      }
+
+      this.computedModelValue = val
+      this.$emit('update:modelValue', val)
+    },
+  },
+}
+</script>