@oslokommune/punkt-vue 12.40.3 → 12.40.5
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/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,24 @@ og skriver commits ca etter [Conventional Commits](https://conventionalcommits.o
|
|
|
5
5
|
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
+
## [12.40.4](https://github.com/oslokommune/punkt/compare/12.40.3...12.40.4) (2025-05-21)
|
|
9
|
+
|
|
10
|
+
### ⚠ BREAKING CHANGES
|
|
11
|
+
Ingen
|
|
12
|
+
|
|
13
|
+
### Features
|
|
14
|
+
Ingen
|
|
15
|
+
|
|
16
|
+
### Bug Fixes
|
|
17
|
+
* Label på SearchInput var feil ifht InputWrapper (#2577).
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Chores
|
|
21
|
+
Ingen
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
|
|
8
26
|
## [12.39.4](https://github.com/oslokommune/punkt/compare/12.39.3...12.39.4) (2025-05-16)
|
|
9
27
|
|
|
10
28
|
### ⚠ BREAKING CHANGES
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("./Button-D2xQdpZo.cjs"),k=require("./Icon-BLNK24NN.cjs"),e=require("vue"),h=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),r=require("./plugins-CMydO4oi.cjs"),f={name:"PktSearchInput",components:{PktButton:m.PktButton,PktIcon:k.PktIcon},props:{appearance:{type:String,default:"local",validator:n=>["local","local-with-button","global"].includes(n)},suggestions:{type:Array,required:!1},id:{type:String,required:!0},name:{type:String,required:!1},label:{type:String,required:!1},placeholder:{type:String,default:"Søk…"},modelValue:{type:String,required:!1},disabled:{type:Boolean,default:!1},fullwidth:{type:Boolean,default:!1},action:{type:String,required:!1},method:{type:String,default:"get",validator:n=>["get","post","dialog"].includes(n)}},emits:["update:modelValue","onSearch","onSuggestionClick"],methods:{handleSuggestionClick(n,a){n?n():this.$emit("onSuggestionClick",a)}}},p=["name","id","placeholder","value","disabled","aria-controls"],
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("./Button-D2xQdpZo.cjs"),k=require("./Icon-BLNK24NN.cjs"),e=require("vue"),h=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),r=require("./plugins-CMydO4oi.cjs"),f={name:"PktSearchInput",components:{PktButton:m.PktButton,PktIcon:k.PktIcon},props:{appearance:{type:String,default:"local",validator:n=>["local","local-with-button","global"].includes(n)},suggestions:{type:Array,required:!1},id:{type:String,required:!0},name:{type:String,required:!1},label:{type:String,required:!1},placeholder:{type:String,default:"Søk…"},modelValue:{type:String,required:!1},disabled:{type:Boolean,default:!1},fullwidth:{type:Boolean,default:!1},action:{type:String,required:!1},method:{type:String,default:"get",validator:n=>["get","post","dialog"].includes(n)}},emits:["update:modelValue","onSearch","onSuggestionClick"],methods:{handleSuggestionClick(n,a){n?n():this.$emit("onSuggestionClick",a)}}},p=["for"],y=["name","id","placeholder","value","disabled","aria-controls"],g=["id"],C={key:0,class:"pkt-searchinput__suggestion-title"},S={key:1,class:"pkt-searchinput__suggestion-text"};function _(n,a,t,v,b,o){const s=e.resolveComponent("PktButton");return e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.action?"form":"div"),{class:e.normalizeClass(`pkt-searchinput pkt-searchinput--${t.appearance} ${t.fullwidth?"pkt-searchinput--fullwidth":""}`),onSubmit:a[4]||(a[4]=l=>n.$emit("onSearch",t.modelValue)),action:t.action?t.action:void 0,method:t.action?t.method:void 0,role:"search"},{default:e.withCtx(()=>[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:t.label?t.id:void 0,class:"pkt-inputwrapper__label"},e.toDisplayString(t.label),9,p)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(t.appearance==="local"?"pkt-input__container":"pkt-searchinput__field")},[e.createElementVNode("input",e.mergeProps(n.$attrs,{onInput:a[0]||(a[0]=l=>n.$emit("update:modelValue",l.target.value)),class:{"pkt-input":!0,"pkt-input--fullwidth":t.fullwidth},type:"search",name:t.name||t.id,id:t.id,placeholder:t.placeholder,value:t.modelValue,disabled:t.disabled,onKeypress:a[1]||(a[1]=e.withKeys(e.withModifiers(l=>n.$emit("onSearch",t.modelValue),["prevent"]),["enter"])),autocomplete:"off","aria-autocomplete":"list","aria-controls":`${t.id}-suggestions`}),null,16,y),e.createVNode(s,{class:e.normalizeClass({"pkt-searchinput__button":!0,"pkt-input-icon":t.appearance==="local"}),variant:"icon-only",iconName:"magnifying-glass-big",type:"submit",skin:t.appearance==="local"?"tertiary":"primary",color:t.appearance==="global"?"yellow":void 0,disabled:t.disabled,onClick:a[2]||(a[2]=e.withModifiers(l=>n.$emit("onSearch",t.modelValue),["prevent"])),onKeypress:a[3]||(a[3]=e.withKeys(e.withModifiers(l=>n.$emit("onSearch",t.modelValue),["prevent"]),["enter"]))},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.label||t.placeholder),1)]),_:1},8,["class","skin","color","disabled"])],2),t.suggestions?(e.openBlock(),e.createElementBlock("ul",{key:1,id:`${t.id}-suggestions`,class:"pkt-searchinput__suggestions","aria-live":"assertive"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.suggestions,(l,i)=>(e.openBlock(),e.createElementBlock("li",{key:`search-suggestion-${i}`},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.href?"a":l.onClick?"button":"div"),{href:l.href||void 0,class:e.normalizeClass({"pkt-link-button":!!l.onClick,"pkt-searchinput__suggestion":!0,"pkt-searchinput__suggestion--has-hover":!!l.href||!!l.onClick}),type:l.onClick?"button":void 0,onClick:d=>o.handleSuggestionClick(l.onClick,i),onKeypress:e.withKeys(d=>o.handleSuggestionClick(l.onClick,i),["enter"])},{default:e.withCtx(()=>[l.title?(e.openBlock(),e.createElementBlock("h3",C,e.toDisplayString(l.title),1)):e.createCommentVNode("",!0),l.text?(e.openBlock(),e.createElementBlock("p",S,e.toDisplayString(l.text),1)):e.createCommentVNode("",!0)]),_:2},1064,["href","class","type","onClick","onKeypress"]))]))),128))],8,g)):e.createCommentVNode("",!0)]),_:1},40,["class","action","method"])}const c=h._export_sfc(f,[["render",_]]),u={install(n){r.registerComponent(n,c)}};r.use(u);exports.PktSearchInput=c;exports.default=u;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { P as
|
|
1
|
+
import { P as _ } from "./Button-Bm6X0lD8.js";
|
|
2
2
|
import { P as S } from "./Icon-Z84h32lN.js";
|
|
3
|
-
import { resolveComponent as
|
|
3
|
+
import { resolveComponent as b, createBlock as h, openBlock as n, resolveDynamicComponent as k, normalizeClass as o, withCtx as s, createElementBlock as i, createCommentVNode as r, createElementVNode as p, toDisplayString as d, createVNode as v, mergeProps as C, withKeys as c, withModifiers as m, createTextVNode as V, Fragment as w, renderList as P } from "vue";
|
|
4
4
|
import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
|
|
5
5
|
import { u as q, a as I } from "./plugins-DQVoaMd9.js";
|
|
6
6
|
const K = {
|
|
7
7
|
name: "PktSearchInput",
|
|
8
|
-
components: { PktButton:
|
|
8
|
+
components: { PktButton: _, PktIcon: S },
|
|
9
9
|
props: {
|
|
10
10
|
appearance: {
|
|
11
11
|
type: String,
|
|
@@ -68,78 +68,72 @@ const K = {
|
|
|
68
68
|
a ? a() : this.$emit("onSuggestionClick", l);
|
|
69
69
|
}
|
|
70
70
|
}
|
|
71
|
-
}, N = ["name", "id", "placeholder", "value", "disabled", "aria-controls"],
|
|
71
|
+
}, N = ["for"], D = ["name", "id", "placeholder", "value", "disabled", "aria-controls"], E = ["id"], z = {
|
|
72
72
|
key: 0,
|
|
73
73
|
class: "pkt-searchinput__suggestion-title"
|
|
74
|
-
},
|
|
74
|
+
}, A = {
|
|
75
75
|
key: 1,
|
|
76
76
|
class: "pkt-searchinput__suggestion-text"
|
|
77
77
|
};
|
|
78
|
-
function
|
|
79
|
-
const
|
|
80
|
-
return n(),
|
|
78
|
+
function F(a, l, e, T, j, f) {
|
|
79
|
+
const y = b("PktButton");
|
|
80
|
+
return n(), h(k(e.action ? "form" : "div"), {
|
|
81
81
|
class: o(`pkt-searchinput pkt-searchinput--${e.appearance} ${e.fullwidth ? "pkt-searchinput--fullwidth" : ""}`),
|
|
82
82
|
onSubmit: l[4] || (l[4] = (t) => a.$emit("onSearch", e.modelValue)),
|
|
83
83
|
action: e.action ? e.action : void 0,
|
|
84
84
|
method: e.action ? e.method : void 0,
|
|
85
85
|
role: "search"
|
|
86
86
|
}, {
|
|
87
|
-
default:
|
|
88
|
-
(n(),
|
|
87
|
+
default: s(() => [
|
|
88
|
+
e.label ? (n(), i("label", {
|
|
89
|
+
key: 0,
|
|
89
90
|
for: e.label ? e.id : void 0,
|
|
90
|
-
class:
|
|
91
|
-
},
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
]),
|
|
127
|
-
_: 1
|
|
128
|
-
}, 8, ["class", "skin", "color", "disabled"])
|
|
129
|
-
], 2)
|
|
130
|
-
]),
|
|
131
|
-
_: 1
|
|
132
|
-
}, 8, ["for", "class"])),
|
|
91
|
+
class: "pkt-inputwrapper__label"
|
|
92
|
+
}, d(e.label), 9, N)) : r("", !0),
|
|
93
|
+
p("div", {
|
|
94
|
+
class: o(e.appearance === "local" ? "pkt-input__container" : "pkt-searchinput__field")
|
|
95
|
+
}, [
|
|
96
|
+
p("input", C(a.$attrs, {
|
|
97
|
+
onInput: l[0] || (l[0] = (t) => a.$emit("update:modelValue", t.target.value)),
|
|
98
|
+
class: { "pkt-input": !0, "pkt-input--fullwidth": e.fullwidth },
|
|
99
|
+
type: "search",
|
|
100
|
+
name: e.name || e.id,
|
|
101
|
+
id: e.id,
|
|
102
|
+
placeholder: e.placeholder,
|
|
103
|
+
value: e.modelValue,
|
|
104
|
+
disabled: e.disabled,
|
|
105
|
+
onKeypress: l[1] || (l[1] = c(m((t) => a.$emit("onSearch", e.modelValue), ["prevent"]), ["enter"])),
|
|
106
|
+
autocomplete: "off",
|
|
107
|
+
"aria-autocomplete": "list",
|
|
108
|
+
"aria-controls": `${e.id}-suggestions`
|
|
109
|
+
}), null, 16, D),
|
|
110
|
+
v(y, {
|
|
111
|
+
class: o({ "pkt-searchinput__button": !0, "pkt-input-icon": e.appearance === "local" }),
|
|
112
|
+
variant: "icon-only",
|
|
113
|
+
iconName: "magnifying-glass-big",
|
|
114
|
+
type: "submit",
|
|
115
|
+
skin: e.appearance === "local" ? "tertiary" : "primary",
|
|
116
|
+
color: e.appearance === "global" ? "yellow" : void 0,
|
|
117
|
+
disabled: e.disabled,
|
|
118
|
+
onClick: l[2] || (l[2] = m((t) => a.$emit("onSearch", e.modelValue), ["prevent"])),
|
|
119
|
+
onKeypress: l[3] || (l[3] = c(m((t) => a.$emit("onSearch", e.modelValue), ["prevent"]), ["enter"]))
|
|
120
|
+
}, {
|
|
121
|
+
default: s(() => [
|
|
122
|
+
V(d(e.label || e.placeholder), 1)
|
|
123
|
+
]),
|
|
124
|
+
_: 1
|
|
125
|
+
}, 8, ["class", "skin", "color", "disabled"])
|
|
126
|
+
], 2),
|
|
133
127
|
e.suggestions ? (n(), i("ul", {
|
|
134
|
-
key:
|
|
128
|
+
key: 1,
|
|
135
129
|
id: `${e.id}-suggestions`,
|
|
136
130
|
class: "pkt-searchinput__suggestions",
|
|
137
131
|
"aria-live": "assertive"
|
|
138
132
|
}, [
|
|
139
|
-
(n(!0), i(
|
|
140
|
-
key: `search-suggestion-${
|
|
133
|
+
(n(!0), i(w, null, P(e.suggestions, (t, u) => (n(), i("li", {
|
|
134
|
+
key: `search-suggestion-${u}`
|
|
141
135
|
}, [
|
|
142
|
-
(n(),
|
|
136
|
+
(n(), h(k(t.href ? "a" : t.onClick ? "button" : "div"), {
|
|
143
137
|
href: t.href || void 0,
|
|
144
138
|
class: o({
|
|
145
139
|
"pkt-link-button": !!t.onClick,
|
|
@@ -147,28 +141,28 @@ function A(a, l, e, M, T, h) {
|
|
|
147
141
|
"pkt-searchinput__suggestion--has-hover": !!t.href || !!t.onClick
|
|
148
142
|
}),
|
|
149
143
|
type: t.onClick ? "button" : void 0,
|
|
150
|
-
onClick: (
|
|
151
|
-
onKeypress:
|
|
144
|
+
onClick: (g) => f.handleSuggestionClick(t.onClick, u),
|
|
145
|
+
onKeypress: c((g) => f.handleSuggestionClick(t.onClick, u), ["enter"])
|
|
152
146
|
}, {
|
|
153
|
-
default:
|
|
154
|
-
t.title ? (n(), i("h3",
|
|
155
|
-
t.text ? (n(), i("p",
|
|
147
|
+
default: s(() => [
|
|
148
|
+
t.title ? (n(), i("h3", z, d(t.title), 1)) : r("", !0),
|
|
149
|
+
t.text ? (n(), i("p", A, d(t.text), 1)) : r("", !0)
|
|
156
150
|
]),
|
|
157
151
|
_: 2
|
|
158
152
|
}, 1064, ["href", "class", "type", "onClick", "onKeypress"]))
|
|
159
153
|
]))), 128))
|
|
160
|
-
], 8,
|
|
154
|
+
], 8, E)) : r("", !0)
|
|
161
155
|
]),
|
|
162
156
|
_: 1
|
|
163
157
|
}, 40, ["class", "action", "method"]);
|
|
164
158
|
}
|
|
165
|
-
const
|
|
159
|
+
const L = /* @__PURE__ */ B(K, [["render", F]]), M = {
|
|
166
160
|
install(a) {
|
|
167
|
-
I(a,
|
|
161
|
+
I(a, L);
|
|
168
162
|
}
|
|
169
163
|
};
|
|
170
|
-
q(
|
|
164
|
+
q(M);
|
|
171
165
|
export {
|
|
172
|
-
|
|
173
|
-
|
|
166
|
+
L as PktSearchInput,
|
|
167
|
+
M as default
|
|
174
168
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oslokommune/punkt-vue",
|
|
3
|
-
"version": "12.40.
|
|
3
|
+
"version": "12.40.5",
|
|
4
4
|
"description": "Vue komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
|
|
5
5
|
"homepage": "https://punkt.oslo.kommune.no",
|
|
6
6
|
"author": "Team Designsystem, Oslo Origo",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@oslokommune/punkt-assets": "^12.39.2",
|
|
30
|
-
"@oslokommune/punkt-css": "^12.40.
|
|
31
|
-
"@oslokommune/punkt-elements": "^12.40.
|
|
30
|
+
"@oslokommune/punkt-css": "^12.40.5",
|
|
31
|
+
"@oslokommune/punkt-elements": "^12.40.5",
|
|
32
32
|
"@vitejs/plugin-vue": "^5.1.3",
|
|
33
33
|
"edit-json-file": "^1.8.0",
|
|
34
34
|
"sass": "^1.78.0",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"url": "https://github.com/oslokommune/punkt/issues"
|
|
68
68
|
},
|
|
69
69
|
"license": "MIT",
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "a4f4bf4ade1fa8c9c0b793d6e44be75a9fc0ebf2"
|
|
71
71
|
}
|
|
@@ -7,42 +7,36 @@
|
|
|
7
7
|
:method="action ? method : undefined"
|
|
8
8
|
role="search"
|
|
9
9
|
>
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
@click.prevent="$emit('onSearch', modelValue)"
|
|
41
|
-
@keypress.enter.prevent="$emit('onSearch', modelValue)"
|
|
42
|
-
>{{ label || placeholder }}</PktButton
|
|
43
|
-
>
|
|
44
|
-
</div>
|
|
45
|
-
</component>
|
|
10
|
+
<label v-if="label" :for="label ? id : undefined" class="pkt-inputwrapper__label">{{ label }}</label>
|
|
11
|
+
<div :class="appearance === 'local' ? 'pkt-input__container' : 'pkt-searchinput__field'">
|
|
12
|
+
<input
|
|
13
|
+
v-bind="$attrs"
|
|
14
|
+
@input="$emit('update:modelValue', $event.target.value)"
|
|
15
|
+
:class="{ 'pkt-input': true, 'pkt-input--fullwidth': fullwidth }"
|
|
16
|
+
type="search"
|
|
17
|
+
:name="name || id"
|
|
18
|
+
:id="id"
|
|
19
|
+
:placeholder="placeholder"
|
|
20
|
+
:value="modelValue"
|
|
21
|
+
:disabled="disabled"
|
|
22
|
+
@keypress.enter.prevent="$emit('onSearch', modelValue)"
|
|
23
|
+
autocomplete="off"
|
|
24
|
+
aria-autocomplete="list"
|
|
25
|
+
:aria-controls="`${id}-suggestions`"
|
|
26
|
+
/>
|
|
27
|
+
<PktButton
|
|
28
|
+
:class="{ 'pkt-searchinput__button': true, 'pkt-input-icon': appearance === 'local' }"
|
|
29
|
+
variant="icon-only"
|
|
30
|
+
iconName="magnifying-glass-big"
|
|
31
|
+
type="submit"
|
|
32
|
+
:skin="appearance === 'local' ? 'tertiary' : 'primary'"
|
|
33
|
+
:color="appearance === 'global' ? 'yellow' : undefined"
|
|
34
|
+
:disabled="disabled"
|
|
35
|
+
@click.prevent="$emit('onSearch', modelValue)"
|
|
36
|
+
@keypress.enter.prevent="$emit('onSearch', modelValue)"
|
|
37
|
+
>{{ label || placeholder }}</PktButton
|
|
38
|
+
>
|
|
39
|
+
</div>
|
|
46
40
|
<ul v-if="suggestions" :id="`${id}-suggestions`" class="pkt-searchinput__suggestions" aria-live="assertive">
|
|
47
41
|
<li v-for="(suggestion, index) in suggestions" :key="`search-suggestion-${index}`">
|
|
48
42
|
<component
|