dendelion-ui 0.0.1 → 0.0.4
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/dist/dendelion-ui.cjs.js +2 -2
- package/dist/dendelion-ui.es.js +177 -120
- package/dist/dendelion-ui.umd.js +2 -2
- package/dist/types/components/modal/Modal.vue.d.ts +1 -0
- package/dist/types/components/modal/interface.d.ts +1 -0
- package/dist/types/components/search/SearchBar.vue.d.ts +8 -0
- package/dist/types/components/search/index.d.ts +1 -0
- package/dist/types/components.d.ts +1 -0
- package/package.json +72 -72
- package/src/components/button/Button.vue +9 -1
- package/src/components/modal/Modal.vue +9 -3
- package/src/components/modal/interface.ts +1 -0
- package/src/components/search/SearchBar.vue +51 -0
- package/src/components/search/index.ts +1 -0
- package/src/components.ts +2 -1
package/dist/dendelion-ui.cjs.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");var p=(t=>(t[t.Primary=0]="Primary",t[t.PrimaryContent=1]="PrimaryContent",t[t.Secondary=2]="Secondary",t[t.SecondaryContent=3]="SecondaryContent",t[t.Accent=4]="Accent",t[t.AccentContent=5]="AccentContent",t[t.Neutral=6]="Neutral",t[t.NeutralContent=7]="NeutralContent",t[t.Base100=8]="Base100",t[t.Base200=9]="Base200",t[t.Base300=10]="Base300",t[t.BaseContent=11]="BaseContent",t[t.Info=12]="Info",t[t.InfoContent=13]="InfoContent",t[t.Success=14]="Success",t[t.SuccessContent=15]="SuccessContent",t[t.Warning=16]="Warning",t[t.WarningContent=17]="WarningContent",t[t.Error=18]="Error",t[t.ErrorContent=19]="ErrorContent",t))(p||{});class f{static toClassName(n){switch(n){case 0:return"primary";case 1:return"primary-content";case 2:return"secondary";case 3:return"secondary-content";case 4:return"accent";case 5:return"accent-content";case 6:return"neutral";case 7:return"neutral-content";case 8:return"base-100";case 9:return"base-200";case 10:return"base-300";case 11:return"base-content";case 12:return"info";case 13:return"info-content";case 14:return"success";case 15:return"success-content";case 16:return"warning";case 17:return"warning-content";case 18:return"error";case 19:return"error-content";default:return"primary"}}}function B(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var m={exports:{}};/*!
|
|
2
2
|
Copyright (c) 2018 Jed Watson.
|
|
3
3
|
Licensed under the MIT License (MIT), see
|
|
4
4
|
http://jedwatson.github.io/classnames
|
|
5
|
-
*/var
|
|
5
|
+
*/var _;function k(){return _||(_=1,function(t){(function(){var n={}.hasOwnProperty;function a(){for(var r="",c=0;c<arguments.length;c++){var l=arguments[c];l&&(r=o(r,s(l)))}return r}function s(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return a.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var c="";for(var l in r)n.call(r,l)&&r[l]&&(c=o(c,l));return c}function o(r,c){return c?r?r+" "+c:r+c:r}t.exports?(a.default=a,t.exports=a):window.classNames=a})()}(m)),m.exports}var x=k();const d=B(x),w=["type"],S={class:"group-[.is-loading]:text-transparent"},E=e.defineComponent({__name:"Button",props:{type:{default:"button"},loading:{type:Boolean},color:{default:p.Neutral},click:{}},setup(t){const n=t,a=e.ref(d("btn","group",`btn-${f.toClassName(n.color)}`,n.loading?"is-loading":""));return e.watch(()=>n.loading,s=>{a.value=d("btn","group",`btn-${f.toClassName(n.color)}`,s?"is-loading":"")}),(s,o)=>(e.openBlock(),e.createElementBlock("button",{onClick:o[0]||(o[0]=(...r)=>s.click&&s.click(...r)),class:e.normalizeClass(a.value),type:s.type},[o[1]||(o[1]=e.createElementVNode("span",{class:"loading loading-spinner loading-md absolute hidden group-[.is-loading]:block"},null,-1)),e.createElementVNode("span",S,[e.renderSlot(s.$slots,"default")])],10,w))}});var b=(t=>(t[t.XS=0]="XS",t[t.SM=1]="SM",t[t.MD=2]="MD",t[t.LG=3]="LG",t[t.XL=4]="XL",t[t.TWOXL=5]="TWOXL",t[t.THREEXL=6]="THREEXL",t))(b||{});class v{static toClassName(n){switch(n){case 0:return"xs";case 1:return"sm";case 2:return"md";case 3:return"lg";case 4:return"xl";case 5:return"2xl";case 6:return"3xl";default:return"md"}}}const N=e.defineComponent({__name:"Card",props:{backgroundColor:{default:p.Primary},shadow:{type:Boolean,default:!1},fullWidth:{type:Boolean,default:!1},rounded:{type:Boolean},roundedSize:{}},setup(t){const n=t,a=e.ref(d("card",`bg-${n.backgroundColor}`,n.shadow?"shadow-lg":"",n.fullWidth?"w-full":"",n.rounded&&!n.roundedSize?"rounded":n.roundedSize?`rounded-${n.roundedSize}`:""));return(s,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(a.value)},[e.renderSlot(s.$slots,"default")],2))}}),y=(t,n)=>{const a=t.__vccOpts||t;for(const[s,o]of n)a[s]=o;return a},$={},C={class:"card-body"};function V(t,n){return e.openBlock(),e.createElementBlock("div",C,[e.renderSlot(t.$slots,"default")])}const M=y($,[["render",V]]),L=e.defineComponent({__name:"CardTitle",props:{is:{default:"h1"},text:{default:""}},setup(t){return(n,a)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.is),{class:"card-title"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.text),1)]),_:1}))}}),P=e.defineComponent({__name:"Container",props:{container:{type:Boolean,default:!0},padding:{type:Boolean,default:!0}},setup(t){const n=t,a=e.ref([n.container?"container":"",n.padding?"p-6":""]);return(s,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(a.value)},[e.renderSlot(s.$slots,"default")],2))}}),T=e.defineComponent({__name:"Table",props:{zebra:{type:Boolean,default:!1},pinRows:{type:Boolean,default:!1},pinCols:{type:Boolean,default:!1},size:{default:b.MD},columns:{},dataSource:{},ajax:{}},setup(t){const n=e.ref(null),a=t,s=e.ref(d("table",`table-${v.toClassName(a.size)}`,{"table-zebra":a.zebra,"table-pin-rows":a.pinRows,"table-pin-cols ":a.pinCols}));return(o,r)=>(e.openBlock(),e.createElementBlock("table",{ref_key:"table",ref:n,class:e.normalizeClass(s.value)},null,2))}}),j=e.defineComponent({__name:"Stepper",props:{value:{}},emits:["update:value"],setup(t,{expose:n,emit:a}){const s=t,o=e.ref(s.value),r=a,c=l=>{o.value=l,r("update:value",l)};return e.provide("stepper",{value:o,updateValue:c}),e.watch(()=>s.value,l=>{o.value=l}),n({updateValue:c}),(l,g)=>e.renderSlot(l.$slots,"default",{updateValue:c})}}),z=e.defineComponent({__name:"Step",props:{value:{}},setup(t){const n=t,a=e.inject("stepper"),s=e.ref("");return e.watch(()=>a==null?void 0:a.value.value,o=>{o&&n.value&&(s.value=Number(o)>=Number(n.value)?"step-primary":"")}),e.onMounted(()=>{a&&(s.value=a.value.value===n.value?"step-primary":"",Number(a.value.value)>=Number(n.value)&&(s.value="step-primary"))}),(o,r)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["step",s.value])},[e.renderSlot(o.$slots,"default")],2))}}),O={},W={class:"steps"};function X(t,n){return e.openBlock(),e.createElementBlock("ul",W,[e.renderSlot(t.$slots,"default")])}const A=y(O,[["render",X]]),D={key:0},I=e.defineComponent({__name:"StepPanels",setup(t){const n=e.inject("stepper");return(a,s)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade",mode:"out-in"},{default:e.withCtx(()=>{var o,r;return[(o=e.unref(n))!=null&&o.value?(e.openBlock(),e.createElementBlock("div",D,[e.renderSlot(a.$slots,"default",{currentStep:(r=e.unref(n))==null?void 0:r.value})])):e.createCommentVNode("",!0)]}),_:3}))}}),R={key:0},U=e.defineComponent({__name:"StepPanel",props:{value:{}},setup(t,{expose:n}){const a=e.computed(()=>s==null?void 0:s.value.value),s=e.inject("stepper"),o=r=>{s&&s.updateValue(r.toString())};return n({activateCallback:o}),(r,c)=>r.value===a.value?(e.openBlock(),e.createElementBlock("div",R,[e.renderSlot(r.$slots,"default",{activateCallback:o})])):e.createCommentVNode("",!0)}}),K={className:"modal-box"},q={key:0,method:"dialog"},H=e.defineComponent({__name:"Modal",props:{closeButton:{type:Boolean,default:!0},overflow:{type:Boolean,default:!1}},emits:["close"],setup(t,{expose:n,emit:a}){const s=e.ref(null),o=a,r=t,c=e.ref(d("modal",{"overflow-visible":r.overflow}));return n({showModal:()=>{var u;(u=s.value)==null||u.showModal()},closeModal:()=>{var u;(u=s.value)==null||u.close()}}),(u,i)=>(e.openBlock(),e.createElementBlock("dialog",{ref_key:"modal",ref:s,class:e.normalizeClass(c.value),"aria-modal":"true","aria-hidden":"true",role:"dialog",onClose:i[0]||(i[0]=h=>o("close",h))},[e.createElementVNode("div",K,[u.closeButton?(e.openBlock(),e.createElementBlock("form",q,i[1]||(i[1]=[e.createElementVNode("button",{className:"btn btn-sm btn-circle btn-ghost absolute right-2 top-2"},"✕",-1)]))):e.createCommentVNode("",!0),e.renderSlot(u.$slots,"default")])],34))}}),G={class:"hidden w-full max-w-sm lg:flex"},F={class:"relative mx-3 w-full"},Z={class:"w-full max-w-full relative"},J=e.defineComponent({__name:"SearchBar",emits:["input"],setup(t,{emit:n}){const a=e.ref(null),s=n,o=r=>{(r.ctrlKey||r.metaKey)&&r.key.toLowerCase()==="k"&&(r.preventDefault(),a.value&&a.value.focus())};return e.onMounted(()=>{document.addEventListener("keydown",o)}),e.onUnmounted(()=>{document.removeEventListener("keydown",o)}),(r,c)=>(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("label",F,[c[1]||(c[1]=e.createElementVNode("svg",{class:"pointer-events-none absolute z-10 my-3.5 ms-4 opacity-60 text-base-content","aria-hidden":"true",width:"16",height:"16",viewBox:"0.48 0.48 23.04 23.04",fill:"currentColor"},[e.createElementVNode("path",{fill:"none",d:"M0 0h24v24H0z"}),e.createElementVNode("path",{d:"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})],-1)),e.createElementVNode("div",Z,[e.createElementVNode("form",null,[e.createElementVNode("input",{ref_key:"searchInput",ref:a,type:"search",placeholder:"Zoeken...",onInput:c[0]||(c[0]=l=>s("input",l.target.value)),class:"bg-transparent color-[inherit] border-[2px] border-solid border-transparent focus:border-[2px] focus:border-base-200 focus:outline-none rounded-xl w-full px-3 py-2 ps-10"},null,544)])]),c[2]||(c[2]=e.createElementVNode("div",{class:"pointer-events-none absolute end-10 top-2.5 gap-1 opacity-50 rtl:flex-row-reverse hidden lg:flex"},[e.createElementVNode("kbd",{class:"kbd kbd-sm"},"ctrl"),e.createElementVNode("kbd",{class:"kbd kbd-sm"},"K")],-1))])]))}}),Q=["bg-primary","bg-primary-content","bg-secondary","bg-secondary-content","bg-accent","bg-accent-content","bg-neutral","bg-neutral-content","bg-base-100","bg-base-200","bg-base-300","bg-base-content","bg-info","bg-info-content","bg-success","bg-success-content","bg-warning","bg-warning-content","bg-error","bg-error-content","btn-primary","btn-primary-content","btn-secondary","btn-secondary-content","btn-accent","btn-accent-content","btn-neutral","btn-neutral-content","btn-base-100","btn-base-200","btn-base-300","btn-base-content","btn-info","btn-info-content","btn-success","btn-success-content","btn-warning","btn-warning-content","btn-error","btn-error-content","text-primary","text-primary-content","text-secondary","text-secondary-content","text-accent","text-accent-content","text-neutral","text-neutral-content","text-base-100","text-base-200","text-base-300","text-base-content","text-info","text-info-content","text-success","text-success-content","text-warning","text-warning-content","text-error","text-error-content","text-transparent","step","steps","modal","modal-box","btn","btn-sm","btn-circle","btn-ghost","absolute","right-2","top-2","shadow-lg","w-full","rounded-xs","rounded-sm","rounded-md","rounded-lg","rounded-xl","rounded-2xl","rounded-3xl","hidden","block"];exports.Button=E;exports.Card=N;exports.CardBody=M;exports.CardTitle=L;exports.Color=p;exports.ColorUtils=f;exports.Container=P;exports.Modal=H;exports.SearchBar=J;exports.Size=b;exports.SizeUtils=v;exports.Step=z;exports.StepList=A;exports.StepPanel=U;exports.StepPanels=I;exports.Stepper=j;exports.Table=T;exports.dendelionSafeList=Q;
|
package/dist/dendelion-ui.es.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
var
|
|
3
|
-
class
|
|
1
|
+
import { defineComponent as i, ref as p, watch as g, createElementBlock as d, openBlock as u, normalizeClass as m, createElementVNode as l, renderSlot as f, createBlock as S, resolveDynamicComponent as T, withCtx as N, createTextVNode as O, toDisplayString as W, provide as X, inject as h, onMounted as M, Transition as A, createCommentVNode as x, unref as $, computed as D, onUnmounted as I } from "vue";
|
|
2
|
+
var w = /* @__PURE__ */ ((e) => (e[e.Primary = 0] = "Primary", e[e.PrimaryContent = 1] = "PrimaryContent", e[e.Secondary = 2] = "Secondary", e[e.SecondaryContent = 3] = "SecondaryContent", e[e.Accent = 4] = "Accent", e[e.AccentContent = 5] = "AccentContent", e[e.Neutral = 6] = "Neutral", e[e.NeutralContent = 7] = "NeutralContent", e[e.Base100 = 8] = "Base100", e[e.Base200 = 9] = "Base200", e[e.Base300 = 10] = "Base300", e[e.BaseContent = 11] = "BaseContent", e[e.Info = 12] = "Info", e[e.InfoContent = 13] = "InfoContent", e[e.Success = 14] = "Success", e[e.SuccessContent = 15] = "SuccessContent", e[e.Warning = 16] = "Warning", e[e.WarningContent = 17] = "WarningContent", e[e.Error = 18] = "Error", e[e.ErrorContent = 19] = "ErrorContent", e))(w || {});
|
|
3
|
+
class B {
|
|
4
4
|
static toClassName(t) {
|
|
5
5
|
switch (t) {
|
|
6
6
|
case 0:
|
|
@@ -51,21 +51,21 @@ class C {
|
|
|
51
51
|
function V(e) {
|
|
52
52
|
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
|
|
53
53
|
}
|
|
54
|
-
var
|
|
54
|
+
var y = { exports: {} };
|
|
55
55
|
/*!
|
|
56
56
|
Copyright (c) 2018 Jed Watson.
|
|
57
57
|
Licensed under the MIT License (MIT), see
|
|
58
58
|
http://jedwatson.github.io/classnames
|
|
59
59
|
*/
|
|
60
|
-
var
|
|
60
|
+
var k;
|
|
61
61
|
function j() {
|
|
62
|
-
return
|
|
62
|
+
return k || (k = 1, function(e) {
|
|
63
63
|
(function() {
|
|
64
64
|
var t = {}.hasOwnProperty;
|
|
65
65
|
function s() {
|
|
66
|
-
for (var n = "",
|
|
67
|
-
var
|
|
68
|
-
|
|
66
|
+
for (var n = "", o = 0; o < arguments.length; o++) {
|
|
67
|
+
var c = arguments[o];
|
|
68
|
+
c && (n = r(n, a(c)));
|
|
69
69
|
}
|
|
70
70
|
return n;
|
|
71
71
|
}
|
|
@@ -78,49 +78,56 @@ function j() {
|
|
|
78
78
|
return s.apply(null, n);
|
|
79
79
|
if (n.toString !== Object.prototype.toString && !n.toString.toString().includes("[native code]"))
|
|
80
80
|
return n.toString();
|
|
81
|
-
var
|
|
82
|
-
for (var
|
|
83
|
-
t.call(n,
|
|
84
|
-
return
|
|
81
|
+
var o = "";
|
|
82
|
+
for (var c in n)
|
|
83
|
+
t.call(n, c) && n[c] && (o = r(o, c));
|
|
84
|
+
return o;
|
|
85
85
|
}
|
|
86
|
-
function r(n,
|
|
87
|
-
return
|
|
86
|
+
function r(n, o) {
|
|
87
|
+
return o ? n ? n + " " + o : n + o : n;
|
|
88
88
|
}
|
|
89
89
|
e.exports ? (s.default = s, e.exports = s) : window.classNames = s;
|
|
90
90
|
})();
|
|
91
|
-
}(
|
|
91
|
+
}(y)), y.exports;
|
|
92
92
|
}
|
|
93
|
-
var
|
|
94
|
-
const
|
|
93
|
+
var R = j();
|
|
94
|
+
const _ = /* @__PURE__ */ V(R), K = ["type"], H = { class: "group-[.is-loading]:text-transparent" }, oe = /* @__PURE__ */ i({
|
|
95
95
|
__name: "Button",
|
|
96
96
|
props: {
|
|
97
97
|
type: { default: "button" },
|
|
98
98
|
loading: { type: Boolean },
|
|
99
|
-
color: { default:
|
|
99
|
+
color: { default: w.Neutral },
|
|
100
100
|
click: {}
|
|
101
101
|
},
|
|
102
102
|
setup(e) {
|
|
103
|
-
const t = e, s = p(
|
|
103
|
+
const t = e, s = p(_(
|
|
104
104
|
"btn",
|
|
105
105
|
"group",
|
|
106
|
-
`btn-${
|
|
106
|
+
`btn-${B.toClassName(t.color)}`,
|
|
107
107
|
t.loading ? "is-loading" : ""
|
|
108
108
|
));
|
|
109
|
-
return (
|
|
109
|
+
return g(() => t.loading, (a) => {
|
|
110
|
+
s.value = _(
|
|
111
|
+
"btn",
|
|
112
|
+
"group",
|
|
113
|
+
`btn-${B.toClassName(t.color)}`,
|
|
114
|
+
a ? "is-loading" : ""
|
|
115
|
+
);
|
|
116
|
+
}), (a, r) => (u(), d("button", {
|
|
110
117
|
onClick: r[0] || (r[0] = //@ts-ignore
|
|
111
118
|
(...n) => a.click && a.click(...n)),
|
|
112
|
-
class:
|
|
119
|
+
class: m(s.value),
|
|
113
120
|
type: a.type
|
|
114
121
|
}, [
|
|
115
|
-
r[1] || (r[1] =
|
|
116
|
-
|
|
117
|
-
|
|
122
|
+
r[1] || (r[1] = l("span", { class: "loading loading-spinner loading-md absolute hidden group-[.is-loading]:block" }, null, -1)),
|
|
123
|
+
l("span", H, [
|
|
124
|
+
f(a.$slots, "default")
|
|
118
125
|
])
|
|
119
|
-
], 10,
|
|
126
|
+
], 10, K));
|
|
120
127
|
}
|
|
121
128
|
});
|
|
122
|
-
var
|
|
123
|
-
class
|
|
129
|
+
var E = /* @__PURE__ */ ((e) => (e[e.XS = 0] = "XS", e[e.SM = 1] = "SM", e[e.MD = 2] = "MD", e[e.LG = 3] = "LG", e[e.XL = 4] = "XL", e[e.TWOXL = 5] = "TWOXL", e[e.THREEXL = 6] = "THREEXL", e))(E || {});
|
|
130
|
+
class U {
|
|
124
131
|
static toClassName(t) {
|
|
125
132
|
switch (t) {
|
|
126
133
|
case 0:
|
|
@@ -142,55 +149,55 @@ class I {
|
|
|
142
149
|
}
|
|
143
150
|
}
|
|
144
151
|
}
|
|
145
|
-
const
|
|
152
|
+
const ce = /* @__PURE__ */ i({
|
|
146
153
|
__name: "Card",
|
|
147
154
|
props: {
|
|
148
|
-
backgroundColor: { default:
|
|
155
|
+
backgroundColor: { default: w.Primary },
|
|
149
156
|
shadow: { type: Boolean, default: !1 },
|
|
150
157
|
fullWidth: { type: Boolean, default: !1 },
|
|
151
158
|
rounded: { type: Boolean },
|
|
152
159
|
roundedSize: {}
|
|
153
160
|
},
|
|
154
161
|
setup(e) {
|
|
155
|
-
const t = e, s = p(
|
|
162
|
+
const t = e, s = p(_(
|
|
156
163
|
"card",
|
|
157
164
|
`bg-${t.backgroundColor}`,
|
|
158
165
|
t.shadow ? "shadow-lg" : "",
|
|
159
166
|
t.fullWidth ? "w-full" : "",
|
|
160
167
|
t.rounded && !t.roundedSize ? "rounded" : t.roundedSize ? `rounded-${t.roundedSize}` : ""
|
|
161
168
|
));
|
|
162
|
-
return (a, r) => (u(),
|
|
163
|
-
class:
|
|
169
|
+
return (a, r) => (u(), d("div", {
|
|
170
|
+
class: m(s.value)
|
|
164
171
|
}, [
|
|
165
|
-
|
|
172
|
+
f(a.$slots, "default")
|
|
166
173
|
], 2));
|
|
167
174
|
}
|
|
168
|
-
}),
|
|
175
|
+
}), L = (e, t) => {
|
|
169
176
|
const s = e.__vccOpts || e;
|
|
170
177
|
for (const [a, r] of t)
|
|
171
178
|
s[a] = r;
|
|
172
179
|
return s;
|
|
173
|
-
}, q = {},
|
|
174
|
-
function
|
|
175
|
-
return u(),
|
|
176
|
-
|
|
180
|
+
}, q = {}, z = { class: "card-body" };
|
|
181
|
+
function G(e, t) {
|
|
182
|
+
return u(), d("div", z, [
|
|
183
|
+
f(e.$slots, "default")
|
|
177
184
|
]);
|
|
178
185
|
}
|
|
179
|
-
const
|
|
186
|
+
const le = /* @__PURE__ */ L(q, [["render", G]]), ue = /* @__PURE__ */ i({
|
|
180
187
|
__name: "CardTitle",
|
|
181
188
|
props: {
|
|
182
189
|
is: { default: "h1" },
|
|
183
190
|
text: { default: "" }
|
|
184
191
|
},
|
|
185
192
|
setup(e) {
|
|
186
|
-
return (t, s) => (u(),
|
|
187
|
-
default:
|
|
188
|
-
|
|
193
|
+
return (t, s) => (u(), S(T(t.is), { class: "card-title" }, {
|
|
194
|
+
default: N(() => [
|
|
195
|
+
O(W(t.text), 1)
|
|
189
196
|
]),
|
|
190
197
|
_: 1
|
|
191
198
|
}));
|
|
192
199
|
}
|
|
193
|
-
}),
|
|
200
|
+
}), de = /* @__PURE__ */ i({
|
|
194
201
|
__name: "Container",
|
|
195
202
|
props: {
|
|
196
203
|
container: { type: Boolean, default: !0 },
|
|
@@ -202,151 +209,200 @@ const ne = /* @__PURE__ */ k(q, [["render", H]]), se = /* @__PURE__ */ d({
|
|
|
202
209
|
//To disable the max width in some cases
|
|
203
210
|
t.padding ? "p-6" : ""
|
|
204
211
|
]);
|
|
205
|
-
return (a, r) => (u(),
|
|
206
|
-
class:
|
|
212
|
+
return (a, r) => (u(), d("div", {
|
|
213
|
+
class: m(s.value)
|
|
207
214
|
}, [
|
|
208
|
-
|
|
215
|
+
f(a.$slots, "default")
|
|
209
216
|
], 2));
|
|
210
217
|
}
|
|
211
|
-
}),
|
|
218
|
+
}), ie = /* @__PURE__ */ i({
|
|
212
219
|
__name: "Table",
|
|
213
220
|
props: {
|
|
214
221
|
zebra: { type: Boolean, default: !1 },
|
|
215
222
|
pinRows: { type: Boolean, default: !1 },
|
|
216
223
|
pinCols: { type: Boolean, default: !1 },
|
|
217
|
-
size: { default:
|
|
224
|
+
size: { default: E.MD },
|
|
218
225
|
columns: {},
|
|
219
226
|
dataSource: {},
|
|
220
227
|
ajax: {}
|
|
221
228
|
},
|
|
222
229
|
setup(e) {
|
|
223
|
-
const t = p(null), s = e, a = p(
|
|
230
|
+
const t = p(null), s = e, a = p(_("table", `table-${U.toClassName(s.size)}`, {
|
|
224
231
|
"table-zebra": s.zebra,
|
|
225
232
|
"table-pin-rows": s.pinRows,
|
|
226
233
|
"table-pin-cols ": s.pinCols
|
|
227
234
|
}));
|
|
228
|
-
return (r, n) => (u(),
|
|
235
|
+
return (r, n) => (u(), d("table", {
|
|
229
236
|
ref_key: "table",
|
|
230
237
|
ref: t,
|
|
231
|
-
class:
|
|
238
|
+
class: m(a.value)
|
|
232
239
|
}, null, 2));
|
|
233
240
|
}
|
|
234
|
-
}),
|
|
241
|
+
}), pe = /* @__PURE__ */ i({
|
|
235
242
|
__name: "Stepper",
|
|
236
243
|
props: {
|
|
237
244
|
value: {}
|
|
238
245
|
},
|
|
239
246
|
emits: ["update:value"],
|
|
240
247
|
setup(e, { expose: t, emit: s }) {
|
|
241
|
-
const a = e, r = p(a.value), n = s,
|
|
242
|
-
r.value =
|
|
248
|
+
const a = e, r = p(a.value), n = s, o = (c) => {
|
|
249
|
+
r.value = c, n("update:value", c);
|
|
243
250
|
};
|
|
244
|
-
return
|
|
251
|
+
return X("stepper", {
|
|
245
252
|
value: r,
|
|
246
|
-
updateValue:
|
|
247
|
-
}),
|
|
248
|
-
r.value =
|
|
253
|
+
updateValue: o
|
|
254
|
+
}), g(() => a.value, (c) => {
|
|
255
|
+
r.value = c;
|
|
249
256
|
}), t({
|
|
250
|
-
updateValue:
|
|
251
|
-
}), (
|
|
257
|
+
updateValue: o
|
|
258
|
+
}), (c, P) => f(c.$slots, "default", { updateValue: o });
|
|
252
259
|
}
|
|
253
|
-
}),
|
|
260
|
+
}), fe = /* @__PURE__ */ i({
|
|
254
261
|
__name: "Step",
|
|
255
262
|
props: {
|
|
256
263
|
value: {}
|
|
257
264
|
},
|
|
258
265
|
setup(e) {
|
|
259
|
-
const t = e, s =
|
|
260
|
-
return
|
|
266
|
+
const t = e, s = h("stepper"), a = p("");
|
|
267
|
+
return g(() => s == null ? void 0 : s.value.value, (r) => {
|
|
261
268
|
r && t.value && (a.value = Number(r) >= Number(t.value) ? "step-primary" : "");
|
|
262
|
-
}),
|
|
269
|
+
}), M(() => {
|
|
263
270
|
s && (a.value = s.value.value === t.value ? "step-primary" : "", Number(s.value.value) >= Number(t.value) && (a.value = "step-primary"));
|
|
264
|
-
}), (r, n) => (u(),
|
|
265
|
-
class:
|
|
271
|
+
}), (r, n) => (u(), d("li", {
|
|
272
|
+
class: m(["step", a.value])
|
|
266
273
|
}, [
|
|
267
|
-
|
|
274
|
+
f(r.$slots, "default")
|
|
268
275
|
], 2));
|
|
269
276
|
}
|
|
270
|
-
}),
|
|
277
|
+
}), F = {}, Z = { class: "steps" };
|
|
271
278
|
function J(e, t) {
|
|
272
|
-
return u(),
|
|
273
|
-
|
|
279
|
+
return u(), d("ul", Z, [
|
|
280
|
+
f(e.$slots, "default")
|
|
274
281
|
]);
|
|
275
282
|
}
|
|
276
|
-
const
|
|
283
|
+
const be = /* @__PURE__ */ L(F, [["render", J]]), Q = { key: 0 }, me = /* @__PURE__ */ i({
|
|
277
284
|
__name: "StepPanels",
|
|
278
285
|
setup(e) {
|
|
279
|
-
const t =
|
|
280
|
-
return (s, a) => (u(),
|
|
286
|
+
const t = h("stepper");
|
|
287
|
+
return (s, a) => (u(), S(A, {
|
|
281
288
|
name: "fade",
|
|
282
289
|
mode: "out-in"
|
|
283
290
|
}, {
|
|
284
|
-
default:
|
|
291
|
+
default: N(() => {
|
|
285
292
|
var r, n;
|
|
286
293
|
return [
|
|
287
|
-
(r =
|
|
288
|
-
|
|
289
|
-
currentStep: (n =
|
|
294
|
+
(r = $(t)) != null && r.value ? (u(), d("div", Q, [
|
|
295
|
+
f(s.$slots, "default", {
|
|
296
|
+
currentStep: (n = $(t)) == null ? void 0 : n.value
|
|
290
297
|
})
|
|
291
|
-
])) :
|
|
298
|
+
])) : x("", !0)
|
|
292
299
|
];
|
|
293
300
|
}),
|
|
294
301
|
_: 3
|
|
295
302
|
}));
|
|
296
303
|
}
|
|
297
|
-
}),
|
|
304
|
+
}), Y = { key: 0 }, _e = /* @__PURE__ */ i({
|
|
298
305
|
__name: "StepPanel",
|
|
299
306
|
props: {
|
|
300
307
|
value: {}
|
|
301
308
|
},
|
|
302
309
|
setup(e, { expose: t }) {
|
|
303
|
-
const s =
|
|
310
|
+
const s = D(() => a == null ? void 0 : a.value.value), a = h("stepper"), r = (n) => {
|
|
304
311
|
a && a.updateValue(n.toString());
|
|
305
312
|
};
|
|
306
313
|
return t({
|
|
307
314
|
activateCallback: r
|
|
308
|
-
}), (n,
|
|
309
|
-
|
|
310
|
-
])) :
|
|
315
|
+
}), (n, o) => n.value === s.value ? (u(), d("div", Y, [
|
|
316
|
+
f(n.$slots, "default", { activateCallback: r })
|
|
317
|
+
])) : x("", !0);
|
|
311
318
|
}
|
|
312
|
-
}),
|
|
319
|
+
}), ee = { className: "modal-box" }, te = {
|
|
313
320
|
key: 0,
|
|
314
321
|
method: "dialog"
|
|
315
|
-
},
|
|
322
|
+
}, ve = /* @__PURE__ */ i({
|
|
316
323
|
__name: "Modal",
|
|
317
324
|
props: {
|
|
318
|
-
closeButton: { type: Boolean, default: !0 }
|
|
325
|
+
closeButton: { type: Boolean, default: !0 },
|
|
326
|
+
overflow: { type: Boolean, default: !1 }
|
|
319
327
|
},
|
|
320
328
|
emits: ["close"],
|
|
321
329
|
setup(e, { expose: t, emit: s }) {
|
|
322
|
-
const a = p(null), r = s
|
|
330
|
+
const a = p(null), r = s, o = p(_("modal", {
|
|
331
|
+
"overflow-visible": e.overflow
|
|
332
|
+
}));
|
|
323
333
|
return t({
|
|
324
334
|
showModal: () => {
|
|
325
|
-
var
|
|
326
|
-
(
|
|
335
|
+
var b;
|
|
336
|
+
(b = a.value) == null || b.showModal();
|
|
327
337
|
},
|
|
328
338
|
closeModal: () => {
|
|
329
|
-
var
|
|
330
|
-
(
|
|
339
|
+
var b;
|
|
340
|
+
(b = a.value) == null || b.close();
|
|
331
341
|
}
|
|
332
|
-
}), (
|
|
342
|
+
}), (b, v) => (u(), d("dialog", {
|
|
333
343
|
ref_key: "modal",
|
|
334
344
|
ref: a,
|
|
335
|
-
class:
|
|
345
|
+
class: m(o.value),
|
|
336
346
|
"aria-modal": "true",
|
|
337
347
|
"aria-hidden": "true",
|
|
338
348
|
role: "dialog",
|
|
339
|
-
onClose:
|
|
349
|
+
onClose: v[0] || (v[0] = (C) => r("close", C))
|
|
340
350
|
}, [
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
]))) :
|
|
345
|
-
|
|
351
|
+
l("div", ee, [
|
|
352
|
+
b.closeButton ? (u(), d("form", te, v[1] || (v[1] = [
|
|
353
|
+
l("button", { className: "btn btn-sm btn-circle btn-ghost absolute right-2 top-2" }, "✕", -1)
|
|
354
|
+
]))) : x("", !0),
|
|
355
|
+
f(b.$slots, "default")
|
|
356
|
+
])
|
|
357
|
+
], 34));
|
|
358
|
+
}
|
|
359
|
+
}), ne = { class: "hidden w-full max-w-sm lg:flex" }, se = { class: "relative mx-3 w-full" }, ae = { class: "w-full max-w-full relative" }, ye = /* @__PURE__ */ i({
|
|
360
|
+
__name: "SearchBar",
|
|
361
|
+
emits: ["input"],
|
|
362
|
+
setup(e, { emit: t }) {
|
|
363
|
+
const s = p(null), a = t, r = (n) => {
|
|
364
|
+
(n.ctrlKey || n.metaKey) && n.key.toLowerCase() === "k" && (n.preventDefault(), s.value && s.value.focus());
|
|
365
|
+
};
|
|
366
|
+
return M(() => {
|
|
367
|
+
document.addEventListener("keydown", r);
|
|
368
|
+
}), I(() => {
|
|
369
|
+
document.removeEventListener("keydown", r);
|
|
370
|
+
}), (n, o) => (u(), d("div", ne, [
|
|
371
|
+
l("label", se, [
|
|
372
|
+
o[1] || (o[1] = l("svg", {
|
|
373
|
+
class: "pointer-events-none absolute z-10 my-3.5 ms-4 opacity-60 text-base-content",
|
|
374
|
+
"aria-hidden": "true",
|
|
375
|
+
width: "16",
|
|
376
|
+
height: "16",
|
|
377
|
+
viewBox: "0.48 0.48 23.04 23.04",
|
|
378
|
+
fill: "currentColor"
|
|
379
|
+
}, [
|
|
380
|
+
l("path", {
|
|
381
|
+
fill: "none",
|
|
382
|
+
d: "M0 0h24v24H0z"
|
|
383
|
+
}),
|
|
384
|
+
l("path", { d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" })
|
|
385
|
+
], -1)),
|
|
386
|
+
l("div", ae, [
|
|
387
|
+
l("form", null, [
|
|
388
|
+
l("input", {
|
|
389
|
+
ref_key: "searchInput",
|
|
390
|
+
ref: s,
|
|
391
|
+
type: "search",
|
|
392
|
+
placeholder: "Zoeken...",
|
|
393
|
+
onInput: o[0] || (o[0] = (c) => a("input", c.target.value)),
|
|
394
|
+
class: "bg-transparent color-[inherit] border-[2px] border-solid border-transparent focus:border-[2px] focus:border-base-200 focus:outline-none rounded-xl w-full px-3 py-2 ps-10"
|
|
395
|
+
}, null, 544)
|
|
396
|
+
])
|
|
397
|
+
]),
|
|
398
|
+
o[2] || (o[2] = l("div", { class: "pointer-events-none absolute end-10 top-2.5 gap-1 opacity-50 rtl:flex-row-reverse hidden lg:flex" }, [
|
|
399
|
+
l("kbd", { class: "kbd kbd-sm" }, "ctrl"),
|
|
400
|
+
l("kbd", { class: "kbd kbd-sm" }, "K")
|
|
401
|
+
], -1))
|
|
346
402
|
])
|
|
347
|
-
]
|
|
403
|
+
]));
|
|
348
404
|
}
|
|
349
|
-
}),
|
|
405
|
+
}), ge = [
|
|
350
406
|
"bg-primary",
|
|
351
407
|
"bg-primary-content",
|
|
352
408
|
"bg-secondary",
|
|
@@ -432,21 +488,22 @@ const ue = /* @__PURE__ */ k(U, [["render", J]]), K = { key: 0 }, le = /* @__PUR
|
|
|
432
488
|
"block"
|
|
433
489
|
];
|
|
434
490
|
export {
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
491
|
+
oe as Button,
|
|
492
|
+
ce as Card,
|
|
493
|
+
le as CardBody,
|
|
494
|
+
ue as CardTitle,
|
|
495
|
+
w as Color,
|
|
496
|
+
B as ColorUtils,
|
|
497
|
+
de as Container,
|
|
498
|
+
ve as Modal,
|
|
499
|
+
ye as SearchBar,
|
|
500
|
+
E as Size,
|
|
501
|
+
U as SizeUtils,
|
|
502
|
+
fe as Step,
|
|
503
|
+
be as StepList,
|
|
504
|
+
_e as StepPanel,
|
|
505
|
+
me as StepPanels,
|
|
506
|
+
pe as Stepper,
|
|
507
|
+
ie as Table,
|
|
508
|
+
ge as dendelionSafeList
|
|
452
509
|
};
|
package/dist/dendelion-ui.umd.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.DendelionUI={},l.Vue))})(this,function(l,e){"use strict";var u=(t=>(t[t.Primary=0]="Primary",t[t.PrimaryContent=1]="PrimaryContent",t[t.Secondary=2]="Secondary",t[t.SecondaryContent=3]="SecondaryContent",t[t.Accent=4]="Accent",t[t.AccentContent=5]="AccentContent",t[t.Neutral=6]="Neutral",t[t.NeutralContent=7]="NeutralContent",t[t.Base100=8]="Base100",t[t.Base200=9]="Base200",t[t.Base300=10]="Base300",t[t.BaseContent=11]="BaseContent",t[t.Info=12]="Info",t[t.InfoContent=13]="InfoContent",t[t.Success=14]="Success",t[t.SuccessContent=15]="SuccessContent",t[t.Warning=16]="Warning",t[t.WarningContent=17]="WarningContent",t[t.Error=18]="Error",t[t.ErrorContent=19]="ErrorContent",t))(u||{});class m{static toClassName(n){switch(n){case 0:return"primary";case 1:return"primary-content";case 2:return"secondary";case 3:return"secondary-content";case 4:return"accent";case 5:return"accent-content";case 6:return"neutral";case 7:return"neutral-content";case 8:return"base-100";case 9:return"base-200";case 10:return"base-300";case 11:return"base-content";case 12:return"info";case 13:return"info-content";case 14:return"success";case 15:return"success-content";case 16:return"warning";case 17:return"warning-content";case 18:return"error";case 19:return"error-content";default:return"primary"}}}function B(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var b={exports:{}};/*!
|
|
2
2
|
Copyright (c) 2018 Jed Watson.
|
|
3
3
|
Licensed under the MIT License (MIT), see
|
|
4
4
|
http://jedwatson.github.io/classnames
|
|
5
|
-
*/var
|
|
5
|
+
*/var y;function k(){return y||(y=1,function(t){(function(){var n={}.hasOwnProperty;function r(){for(var a="",c=0;c<arguments.length;c++){var d=arguments[c];d&&(a=o(a,s(d)))}return a}function s(a){if(typeof a=="string"||typeof a=="number")return a;if(typeof a!="object")return"";if(Array.isArray(a))return r.apply(null,a);if(a.toString!==Object.prototype.toString&&!a.toString.toString().includes("[native code]"))return a.toString();var c="";for(var d in a)n.call(a,d)&&a[d]&&(c=o(c,d));return c}function o(a,c){return c?a?a+" "+c:a+c:a}t.exports?(r.default=r,t.exports=r):window.classNames=r})()}(b)),b.exports}var w=k();const p=B(w),S=["type"],x={class:"group-[.is-loading]:text-transparent"},E=e.defineComponent({__name:"Button",props:{type:{default:"button"},loading:{type:Boolean},color:{default:u.Neutral},click:{}},setup(t){const n=t,r=e.ref(p("btn","group",`btn-${m.toClassName(n.color)}`,n.loading?"is-loading":""));return e.watch(()=>n.loading,s=>{r.value=p("btn","group",`btn-${m.toClassName(n.color)}`,s?"is-loading":"")}),(s,o)=>(e.openBlock(),e.createElementBlock("button",{onClick:o[0]||(o[0]=(...a)=>s.click&&s.click(...a)),class:e.normalizeClass(r.value),type:s.type},[o[1]||(o[1]=e.createElementVNode("span",{class:"loading loading-spinner loading-md absolute hidden group-[.is-loading]:block"},null,-1)),e.createElementVNode("span",x,[e.renderSlot(s.$slots,"default")])],10,S))}});var _=(t=>(t[t.XS=0]="XS",t[t.SM=1]="SM",t[t.MD=2]="MD",t[t.LG=3]="LG",t[t.XL=4]="XL",t[t.TWOXL=5]="TWOXL",t[t.THREEXL=6]="THREEXL",t))(_||{});class g{static toClassName(n){switch(n){case 0:return"xs";case 1:return"sm";case 2:return"md";case 3:return"lg";case 4:return"xl";case 5:return"2xl";case 6:return"3xl";default:return"md"}}}const N=e.defineComponent({__name:"Card",props:{backgroundColor:{default:u.Primary},shadow:{type:Boolean,default:!1},fullWidth:{type:Boolean,default:!1},rounded:{type:Boolean},roundedSize:{}},setup(t){const n=t,r=e.ref(p("card",`bg-${n.backgroundColor}`,n.shadow?"shadow-lg":"",n.fullWidth?"w-full":"",n.rounded&&!n.roundedSize?"rounded":n.roundedSize?`rounded-${n.roundedSize}`:""));return(s,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.value)},[e.renderSlot(s.$slots,"default")],2))}}),h=(t,n)=>{const r=t.__vccOpts||t;for(const[s,o]of n)r[s]=o;return r},$={},C={class:"card-body"};function V(t,n){return e.openBlock(),e.createElementBlock("div",C,[e.renderSlot(t.$slots,"default")])}const M=h($,[["render",V]]),L=e.defineComponent({__name:"CardTitle",props:{is:{default:"h1"},text:{default:""}},setup(t){return(n,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.is),{class:"card-title"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.text),1)]),_:1}))}}),P=e.defineComponent({__name:"Container",props:{container:{type:Boolean,default:!0},padding:{type:Boolean,default:!0}},setup(t){const n=t,r=e.ref([n.container?"container":"",n.padding?"p-6":""]);return(s,o)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(r.value)},[e.renderSlot(s.$slots,"default")],2))}}),T=e.defineComponent({__name:"Table",props:{zebra:{type:Boolean,default:!1},pinRows:{type:Boolean,default:!1},pinCols:{type:Boolean,default:!1},size:{default:_.MD},columns:{},dataSource:{},ajax:{}},setup(t){const n=e.ref(null),r=t,s=e.ref(p("table",`table-${g.toClassName(r.size)}`,{"table-zebra":r.zebra,"table-pin-rows":r.pinRows,"table-pin-cols ":r.pinCols}));return(o,a)=>(e.openBlock(),e.createElementBlock("table",{ref_key:"table",ref:n,class:e.normalizeClass(s.value)},null,2))}}),j=e.defineComponent({__name:"Stepper",props:{value:{}},emits:["update:value"],setup(t,{expose:n,emit:r}){const s=t,o=e.ref(s.value),a=r,c=d=>{o.value=d,a("update:value",d)};return e.provide("stepper",{value:o,updateValue:c}),e.watch(()=>s.value,d=>{o.value=d}),n({updateValue:c}),(d,Y)=>e.renderSlot(d.$slots,"default",{updateValue:c})}}),z=e.defineComponent({__name:"Step",props:{value:{}},setup(t){const n=t,r=e.inject("stepper"),s=e.ref("");return e.watch(()=>r==null?void 0:r.value.value,o=>{o&&n.value&&(s.value=Number(o)>=Number(n.value)?"step-primary":"")}),e.onMounted(()=>{r&&(s.value=r.value.value===n.value?"step-primary":"",Number(r.value.value)>=Number(n.value)&&(s.value="step-primary"))}),(o,a)=>(e.openBlock(),e.createElementBlock("li",{class:e.normalizeClass(["step",s.value])},[e.renderSlot(o.$slots,"default")],2))}}),O={},D={class:"steps"};function I(t,n){return e.openBlock(),e.createElementBlock("ul",D,[e.renderSlot(t.$slots,"default")])}const W=h(O,[["render",I]]),X={key:0},A=e.defineComponent({__name:"StepPanels",setup(t){const n=e.inject("stepper");return(r,s)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade",mode:"out-in"},{default:e.withCtx(()=>{var o,a;return[(o=e.unref(n))!=null&&o.value?(e.openBlock(),e.createElementBlock("div",X,[e.renderSlot(r.$slots,"default",{currentStep:(a=e.unref(n))==null?void 0:a.value})])):e.createCommentVNode("",!0)]}),_:3}))}}),U={key:0},R=e.defineComponent({__name:"StepPanel",props:{value:{}},setup(t,{expose:n}){const r=e.computed(()=>s==null?void 0:s.value.value),s=e.inject("stepper"),o=a=>{s&&s.updateValue(a.toString())};return n({activateCallback:o}),(a,c)=>a.value===r.value?(e.openBlock(),e.createElementBlock("div",U,[e.renderSlot(a.$slots,"default",{activateCallback:o})])):e.createCommentVNode("",!0)}}),K={className:"modal-box"},q={key:0,method:"dialog"},H=e.defineComponent({__name:"Modal",props:{closeButton:{type:Boolean,default:!0},overflow:{type:Boolean,default:!1}},emits:["close"],setup(t,{expose:n,emit:r}){const s=e.ref(null),o=r,a=t,c=e.ref(p("modal",{"overflow-visible":a.overflow}));return n({showModal:()=>{var i;(i=s.value)==null||i.showModal()},closeModal:()=>{var i;(i=s.value)==null||i.close()}}),(i,f)=>(e.openBlock(),e.createElementBlock("dialog",{ref_key:"modal",ref:s,class:e.normalizeClass(c.value),"aria-modal":"true","aria-hidden":"true",role:"dialog",onClose:f[0]||(f[0]=v=>o("close",v))},[e.createElementVNode("div",K,[i.closeButton?(e.openBlock(),e.createElementBlock("form",q,f[1]||(f[1]=[e.createElementVNode("button",{className:"btn btn-sm btn-circle btn-ghost absolute right-2 top-2"},"✕",-1)]))):e.createCommentVNode("",!0),e.renderSlot(i.$slots,"default")])],34))}}),G={class:"hidden w-full max-w-sm lg:flex"},F={class:"relative mx-3 w-full"},Z={class:"w-full max-w-full relative"},J=e.defineComponent({__name:"SearchBar",emits:["input"],setup(t,{emit:n}){const r=e.ref(null),s=n,o=a=>{(a.ctrlKey||a.metaKey)&&a.key.toLowerCase()==="k"&&(a.preventDefault(),r.value&&r.value.focus())};return e.onMounted(()=>{document.addEventListener("keydown",o)}),e.onUnmounted(()=>{document.removeEventListener("keydown",o)}),(a,c)=>(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("label",F,[c[1]||(c[1]=e.createElementVNode("svg",{class:"pointer-events-none absolute z-10 my-3.5 ms-4 opacity-60 text-base-content","aria-hidden":"true",width:"16",height:"16",viewBox:"0.48 0.48 23.04 23.04",fill:"currentColor"},[e.createElementVNode("path",{fill:"none",d:"M0 0h24v24H0z"}),e.createElementVNode("path",{d:"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"})],-1)),e.createElementVNode("div",Z,[e.createElementVNode("form",null,[e.createElementVNode("input",{ref_key:"searchInput",ref:r,type:"search",placeholder:"Zoeken...",onInput:c[0]||(c[0]=d=>s("input",d.target.value)),class:"bg-transparent color-[inherit] border-[2px] border-solid border-transparent focus:border-[2px] focus:border-base-200 focus:outline-none rounded-xl w-full px-3 py-2 ps-10"},null,544)])]),c[2]||(c[2]=e.createElementVNode("div",{class:"pointer-events-none absolute end-10 top-2.5 gap-1 opacity-50 rtl:flex-row-reverse hidden lg:flex"},[e.createElementVNode("kbd",{class:"kbd kbd-sm"},"ctrl"),e.createElementVNode("kbd",{class:"kbd kbd-sm"},"K")],-1))])]))}}),Q=["bg-primary","bg-primary-content","bg-secondary","bg-secondary-content","bg-accent","bg-accent-content","bg-neutral","bg-neutral-content","bg-base-100","bg-base-200","bg-base-300","bg-base-content","bg-info","bg-info-content","bg-success","bg-success-content","bg-warning","bg-warning-content","bg-error","bg-error-content","btn-primary","btn-primary-content","btn-secondary","btn-secondary-content","btn-accent","btn-accent-content","btn-neutral","btn-neutral-content","btn-base-100","btn-base-200","btn-base-300","btn-base-content","btn-info","btn-info-content","btn-success","btn-success-content","btn-warning","btn-warning-content","btn-error","btn-error-content","text-primary","text-primary-content","text-secondary","text-secondary-content","text-accent","text-accent-content","text-neutral","text-neutral-content","text-base-100","text-base-200","text-base-300","text-base-content","text-info","text-info-content","text-success","text-success-content","text-warning","text-warning-content","text-error","text-error-content","text-transparent","step","steps","modal","modal-box","btn","btn-sm","btn-circle","btn-ghost","absolute","right-2","top-2","shadow-lg","w-full","rounded-xs","rounded-sm","rounded-md","rounded-lg","rounded-xl","rounded-2xl","rounded-3xl","hidden","block"];l.Button=E,l.Card=N,l.CardBody=M,l.CardTitle=L,l.Color=u,l.ColorUtils=m,l.Container=P,l.Modal=H,l.SearchBar=J,l.Size=_,l.SizeUtils=g,l.Step=z,l.StepList=W,l.StepPanel=R,l.StepPanels=A,l.Stepper=j,l.Table=T,l.dendelionSafeList=Q,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
|
|
@@ -19,6 +19,7 @@ declare const __VLS_component: import("vue").DefineComponent<ModalProps, {
|
|
|
19
19
|
onClose?: ((...args: any[]) => any) | undefined;
|
|
20
20
|
}>, {
|
|
21
21
|
closeButton: boolean;
|
|
22
|
+
overflow: boolean;
|
|
22
23
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {
|
|
23
24
|
modal: HTMLDialogElement;
|
|
24
25
|
}, HTMLDialogElement>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
2
|
+
input: (...args: any[]) => void;
|
|
3
|
+
}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
|
|
4
|
+
onInput?: ((...args: any[]) => any) | undefined;
|
|
5
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {
|
|
6
|
+
searchInput: HTMLInputElement;
|
|
7
|
+
}, HTMLDivElement>;
|
|
8
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as SearchBar } from './SearchBar.vue';
|
package/package.json
CHANGED
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "dendelion-ui",
|
|
3
|
-
"private": false,
|
|
4
|
-
"description": "Simpel component library using Tailwind css and DaisyUI",
|
|
5
|
-
"version": "0.0.
|
|
6
|
-
"author": "ThatzOkay",
|
|
7
|
-
"license": "MIT",
|
|
8
|
-
"homepage": "https://github.com/ThatzOkay/DendelionUI#readme",
|
|
9
|
-
"repository": {
|
|
10
|
-
"url": "git+https://github.com/ThatzOkay/DendelionUI.git",
|
|
11
|
-
"type": "git"
|
|
12
|
-
},
|
|
13
|
-
"bugs": {
|
|
14
|
-
"url": "https://github.com/ThatzOkay/DendelionUI/issues"
|
|
15
|
-
},
|
|
16
|
-
"keywords": [
|
|
17
|
-
"Tailwind",
|
|
18
|
-
"DaisyUI",
|
|
19
|
-
"Vue",
|
|
20
|
-
"Component",
|
|
21
|
-
"Library"
|
|
22
|
-
],
|
|
23
|
-
"type": "module",
|
|
24
|
-
"files": [
|
|
25
|
-
"dist",
|
|
26
|
-
"src"
|
|
27
|
-
],
|
|
28
|
-
"main": "./dist/apldendelion-uiayer.umd.js",
|
|
29
|
-
"module": "./dist/dendelion-ui.es.js",
|
|
30
|
-
"typings": "./dist/types/index.d.ts",
|
|
31
|
-
"types": "./dist/types/index.d.ts",
|
|
32
|
-
"exports": {
|
|
33
|
-
".": {
|
|
34
|
-
"types": "./dist/types/index.d.ts",
|
|
35
|
-
"import": "./dist/dendelion-ui.es.js",
|
|
36
|
-
"require": "./dist/dendelion-ui.umd.js"
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
"scripts": {
|
|
40
|
-
"dev": "cross-env MODE=demo npm run vite",
|
|
41
|
-
"vite": "vite",
|
|
42
|
-
"clean": "rimraf dist",
|
|
43
|
-
"build": "npm run clean && npm run build:lib && npm run build:tsc",
|
|
44
|
-
"build:lib": "cross-env MODE=lib vite build",
|
|
45
|
-
"build:tsc": "vue-tsc --emitDeclarationOnly",
|
|
46
|
-
"build:demo": "cross-env MODE=demo vite build",
|
|
47
|
-
"docs:dev": "vitepress dev docs",
|
|
48
|
-
"docs:build": "vitepress build docs",
|
|
49
|
-
"docs:preview": "vitepress preview docs",
|
|
50
|
-
"lint": "eslint ",
|
|
51
|
-
"lint:fix": "eslint --fix ",
|
|
52
|
-
"preview": "vite preview"
|
|
53
|
-
},
|
|
54
|
-
"dependencies": {
|
|
55
|
-
"classnames": "^2.5.1",
|
|
56
|
-
"vue": "^3.5.13"
|
|
57
|
-
},
|
|
58
|
-
"devDependencies": {
|
|
59
|
-
"@vitejs/plugin-vue": "^5.2.1",
|
|
60
|
-
"@vue/tsconfig": "^0.7.0",
|
|
61
|
-
"cross-env": "^7.0.3",
|
|
62
|
-
"daisyui": "^4.12.23",
|
|
63
|
-
"eslint": "^9.
|
|
64
|
-
"eslint-plugin-vue": "^9.32.0",
|
|
65
|
-
"fluid-tailwind": "^1.0.4",
|
|
66
|
-
"rimraf": "^6.0.1",
|
|
67
|
-
"typescript": "~5.
|
|
68
|
-
"typescript-eslint": "^8.
|
|
69
|
-
"vite": "^6.0
|
|
70
|
-
"vue-tsc": "^2.2.0"
|
|
71
|
-
}
|
|
72
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "dendelion-ui",
|
|
3
|
+
"private": false,
|
|
4
|
+
"description": "Simpel component library using Tailwind css and DaisyUI",
|
|
5
|
+
"version": "0.0.4",
|
|
6
|
+
"author": "ThatzOkay",
|
|
7
|
+
"license": "MIT",
|
|
8
|
+
"homepage": "https://github.com/ThatzOkay/DendelionUI#readme",
|
|
9
|
+
"repository": {
|
|
10
|
+
"url": "git+https://github.com/ThatzOkay/DendelionUI.git",
|
|
11
|
+
"type": "git"
|
|
12
|
+
},
|
|
13
|
+
"bugs": {
|
|
14
|
+
"url": "https://github.com/ThatzOkay/DendelionUI/issues"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"Tailwind",
|
|
18
|
+
"DaisyUI",
|
|
19
|
+
"Vue",
|
|
20
|
+
"Component",
|
|
21
|
+
"Library"
|
|
22
|
+
],
|
|
23
|
+
"type": "module",
|
|
24
|
+
"files": [
|
|
25
|
+
"dist",
|
|
26
|
+
"src"
|
|
27
|
+
],
|
|
28
|
+
"main": "./dist/apldendelion-uiayer.umd.js",
|
|
29
|
+
"module": "./dist/dendelion-ui.es.js",
|
|
30
|
+
"typings": "./dist/types/index.d.ts",
|
|
31
|
+
"types": "./dist/types/index.d.ts",
|
|
32
|
+
"exports": {
|
|
33
|
+
".": {
|
|
34
|
+
"types": "./dist/types/index.d.ts",
|
|
35
|
+
"import": "./dist/dendelion-ui.es.js",
|
|
36
|
+
"require": "./dist/dendelion-ui.umd.js"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
"scripts": {
|
|
40
|
+
"dev": "cross-env MODE=demo npm run vite",
|
|
41
|
+
"vite": "vite",
|
|
42
|
+
"clean": "rimraf dist",
|
|
43
|
+
"build": "npm run clean && npm run build:lib && npm run build:tsc",
|
|
44
|
+
"build:lib": "cross-env MODE=lib vite build",
|
|
45
|
+
"build:tsc": "vue-tsc --emitDeclarationOnly",
|
|
46
|
+
"build:demo": "cross-env MODE=demo vite build",
|
|
47
|
+
"docs:dev": "vitepress dev docs",
|
|
48
|
+
"docs:build": "vitepress build docs",
|
|
49
|
+
"docs:preview": "vitepress preview docs",
|
|
50
|
+
"lint": "eslint ",
|
|
51
|
+
"lint:fix": "eslint --fix ",
|
|
52
|
+
"preview": "vite preview"
|
|
53
|
+
},
|
|
54
|
+
"dependencies": {
|
|
55
|
+
"classnames": "^2.5.1",
|
|
56
|
+
"vue": "^3.5.13"
|
|
57
|
+
},
|
|
58
|
+
"devDependencies": {
|
|
59
|
+
"@vitejs/plugin-vue": "^5.2.1",
|
|
60
|
+
"@vue/tsconfig": "^0.7.0",
|
|
61
|
+
"cross-env": "^7.0.3",
|
|
62
|
+
"daisyui": "^4.12.23",
|
|
63
|
+
"eslint": "^9.20.1",
|
|
64
|
+
"eslint-plugin-vue": "^9.32.0",
|
|
65
|
+
"fluid-tailwind": "^1.0.4",
|
|
66
|
+
"rimraf": "^6.0.1",
|
|
67
|
+
"typescript": "~5.7.0",
|
|
68
|
+
"typescript-eslint": "^8.24.0",
|
|
69
|
+
"vite": "^6.1.0",
|
|
70
|
+
"vue-tsc": "^2.2.0"
|
|
71
|
+
}
|
|
72
|
+
}
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
import { Color, ColorUtils } from '@/types/color';
|
|
10
10
|
import { ButtonProps } from './interface';
|
|
11
11
|
import classNames from 'classnames';
|
|
12
|
-
import { ref } from 'vue';
|
|
12
|
+
import { ref, watch } from 'vue';
|
|
13
13
|
|
|
14
14
|
const props = withDefaults(defineProps<ButtonProps>(), {
|
|
15
15
|
type: 'button',
|
|
@@ -21,4 +21,12 @@ const classes = ref(classNames('btn',
|
|
|
21
21
|
`btn-${ColorUtils.toClassName(props.color)}`,
|
|
22
22
|
props.loading ? 'is-loading' : '',
|
|
23
23
|
))
|
|
24
|
+
|
|
25
|
+
watch(() => props.loading, (loading: boolean) => {
|
|
26
|
+
classes.value = classNames('btn',
|
|
27
|
+
'group',
|
|
28
|
+
`btn-${ColorUtils.toClassName(props.color)}`,
|
|
29
|
+
loading ? 'is-loading' : '',
|
|
30
|
+
)
|
|
31
|
+
})
|
|
24
32
|
</script>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<dialog ref="modal" class="
|
|
2
|
+
<dialog ref="modal" :class="classes" aria-modal="true" aria-hidden="true" role="dialog" @close="(e) => emit('close', e)" >
|
|
3
3
|
<div className="modal-box">
|
|
4
4
|
<form v-if="closeButton" method="dialog">
|
|
5
5
|
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
|
|
@@ -12,14 +12,20 @@
|
|
|
12
12
|
<script setup lang="ts">
|
|
13
13
|
import { ref } from 'vue';
|
|
14
14
|
import { ModalProps } from './interface';
|
|
15
|
+
import classNames from 'classnames';
|
|
15
16
|
|
|
16
17
|
const modal = ref<HTMLDialogElement | null>(null);
|
|
17
18
|
|
|
18
19
|
const emit = defineEmits(['close']);
|
|
19
20
|
|
|
20
|
-
withDefaults(defineProps<ModalProps>(), {
|
|
21
|
+
const props = withDefaults(defineProps<ModalProps>(), {
|
|
21
22
|
closeButton: true,
|
|
22
|
-
|
|
23
|
+
overflow: false
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
const classes = ref(classNames('modal', {
|
|
27
|
+
'overflow-visible': props.overflow
|
|
28
|
+
}));
|
|
23
29
|
|
|
24
30
|
const showModal = () => {
|
|
25
31
|
modal.value?.showModal();
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="hidden w-full max-w-sm lg:flex">
|
|
3
|
+
<label class="relative mx-3 w-full">
|
|
4
|
+
<svg class="pointer-events-none absolute z-10 my-3.5 ms-4 opacity-60 text-base-content" aria-hidden="true"
|
|
5
|
+
width="16" height="16" viewBox="0.48 0.48 23.04 23.04" fill="currentColor">
|
|
6
|
+
<path fill="none" d="M0 0h24v24H0z"></path>
|
|
7
|
+
<path
|
|
8
|
+
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
|
|
9
|
+
</path>
|
|
10
|
+
</svg>
|
|
11
|
+
<div class="w-full max-w-full relative">
|
|
12
|
+
<form>
|
|
13
|
+
<input ref="searchInput" type="search" placeholder="Zoeken..." @input="emit('input', ($event.target as HTMLInputElement).value)"
|
|
14
|
+
class="bg-transparent color-[inherit] border-[2px] border-solid border-transparent focus:border-[2px] focus:border-base-200 focus:outline-none rounded-xl w-full px-3 py-2 ps-10">
|
|
15
|
+
</form>
|
|
16
|
+
</div>
|
|
17
|
+
<div
|
|
18
|
+
class="pointer-events-none absolute end-10 top-2.5 gap-1 opacity-50 rtl:flex-row-reverse hidden lg:flex">
|
|
19
|
+
<kbd class="kbd kbd-sm">ctrl</kbd>
|
|
20
|
+
<kbd class="kbd kbd-sm">K</kbd>
|
|
21
|
+
</div>
|
|
22
|
+
</label>
|
|
23
|
+
</div>
|
|
24
|
+
</template>
|
|
25
|
+
|
|
26
|
+
<script setup lang="ts">
|
|
27
|
+
import { onMounted, onUnmounted, ref } from 'vue';
|
|
28
|
+
|
|
29
|
+
const searchInput = ref<HTMLInputElement | null>(null);
|
|
30
|
+
|
|
31
|
+
const emit = defineEmits(['input']);
|
|
32
|
+
|
|
33
|
+
const handleKeyPress = (event: KeyboardEvent) => {
|
|
34
|
+
if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k') {
|
|
35
|
+
event.preventDefault();
|
|
36
|
+
if (searchInput.value) {
|
|
37
|
+
searchInput.value.focus();
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
onMounted(() => {
|
|
44
|
+
document.addEventListener('keydown', handleKeyPress);
|
|
45
|
+
})
|
|
46
|
+
|
|
47
|
+
onUnmounted(() => {
|
|
48
|
+
document.removeEventListener('keydown', handleKeyPress);
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
</script>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as SearchBar } from './SearchBar.vue';
|
package/src/components.ts
CHANGED