ketekny-ui-kit 1.0.118 → 1.0.120
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.js
CHANGED
|
@@ -3,6 +3,7 @@ import kMessage from './src/ui/kMessage.vue'
|
|
|
3
3
|
import kButton from './src/ui/kButton.vue'
|
|
4
4
|
import kCheckbox from './src/ui/kCheckbox.vue'
|
|
5
5
|
import kChip from './src/ui/kChip.vue'
|
|
6
|
+
import kClipboard from './src/ui/kClipboard.vue'
|
|
6
7
|
import kCode from './src/ui/kCode.vue'
|
|
7
8
|
import kDialog from './src/ui/kDialog.vue'
|
|
8
9
|
import kDrawer from './src/ui/kDrawer.vue'
|
|
@@ -56,7 +57,7 @@ import tailwindPreset from './tailwind-preset.js'
|
|
|
56
57
|
// Named exports (tree-shaking friendly)
|
|
57
58
|
export {
|
|
58
59
|
// UI Components
|
|
59
|
-
kMessage, kCode, kToolbar, kTooltip, kTable, kTabs, kChip, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
|
|
60
|
+
kMessage, kCode, kToolbar, kTooltip, kTable, kTabs, kChip, kClipboard, kSpinner, kDatatable, kIcon, kMenu, kSkeleton, kProgressBar, kPagination, kTree,
|
|
60
61
|
|
|
61
62
|
// Form Components
|
|
62
63
|
kButton, kCheckbox, kSelect, kUploader, kToggle, kInput, kDateSelector, kEditor, kSelectButton, kTags, kSearch, kArrayList, kList, kTextArea, kForm, kOptionGroup,
|
package/package.json
CHANGED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<button
|
|
3
|
+
type="button"
|
|
4
|
+
class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 transition hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60"
|
|
5
|
+
:aria-label="ariaLabel || `Copy ${text}`"
|
|
6
|
+
:disabled="disabled"
|
|
7
|
+
@click="copyToClipboard"
|
|
8
|
+
>
|
|
9
|
+
<slot>
|
|
10
|
+
<span class="truncate max-w-[240px]">{{ text }}</span>
|
|
11
|
+
<component :is="copied ? Check : Copy" :class="copied ? 'text-emerald-600' : ''" :size="16" />
|
|
12
|
+
</slot>
|
|
13
|
+
</button>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script setup>
|
|
17
|
+
import { Check, Copy } from "@lucide/vue";
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<script>
|
|
21
|
+
export default {
|
|
22
|
+
name: "kClipboard",
|
|
23
|
+
emits: ["copied", "error"],
|
|
24
|
+
props: {
|
|
25
|
+
text: {
|
|
26
|
+
type: String,
|
|
27
|
+
required: true,
|
|
28
|
+
},
|
|
29
|
+
ariaLabel: {
|
|
30
|
+
type: String,
|
|
31
|
+
default: null,
|
|
32
|
+
},
|
|
33
|
+
disabled: {
|
|
34
|
+
type: Boolean,
|
|
35
|
+
default: false,
|
|
36
|
+
},
|
|
37
|
+
resetAfter: {
|
|
38
|
+
type: Number,
|
|
39
|
+
default: 2000,
|
|
40
|
+
},
|
|
41
|
+
},
|
|
42
|
+
data() {
|
|
43
|
+
return {
|
|
44
|
+
copied: false,
|
|
45
|
+
copiedTimeout: null,
|
|
46
|
+
};
|
|
47
|
+
},
|
|
48
|
+
beforeUnmount() {
|
|
49
|
+
if (this.copiedTimeout) {
|
|
50
|
+
clearTimeout(this.copiedTimeout);
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
methods: {
|
|
54
|
+
async copyToClipboard() {
|
|
55
|
+
if (this.disabled) return;
|
|
56
|
+
|
|
57
|
+
try {
|
|
58
|
+
await navigator.clipboard.writeText(this.text);
|
|
59
|
+
this.copied = true;
|
|
60
|
+
this.$emit("copied", this.text);
|
|
61
|
+
|
|
62
|
+
if (this.copiedTimeout) {
|
|
63
|
+
clearTimeout(this.copiedTimeout);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
this.copiedTimeout = window.setTimeout(() => {
|
|
67
|
+
this.copied = false;
|
|
68
|
+
this.copiedTimeout = null;
|
|
69
|
+
}, this.resetAfter);
|
|
70
|
+
} catch (error) {
|
|
71
|
+
this.$emit("error", error);
|
|
72
|
+
console.error("kClipboard: failed to copy text.", error);
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
</script>
|