@phila/phila-ui-search 1.1.1-beta.0 → 1.1.1-beta.1
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/Search.vue.d.ts.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +121 -116
- package/package.json +2 -2
package/dist/Search.vue.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.vue.d.ts","sourceRoot":"","sources":["../src/Search.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Search.vue.d.ts","sourceRoot":"","sources":["../src/Search.vue"],"names":[],"mappings":"AAyFA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;AAwJ3C,wBAQG"}
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),n=require("@phila/phila-ui-core");var y={prefix:"fas",iconName:"magnifying-glass",icon:[512,512,[128269,"search"],"f002","M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"]},
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),n=require("@phila/phila-ui-core");var y={prefix:"fas",iconName:"magnifying-glass",icon:[512,512,[128269,"search"],"f002","M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"]},x=y;const k=["disabled"],N=e.defineComponent({inheritAttrs:!1,__name:"PhlButton",props:{href:{},to:{},target:{},rel:{},disabled:{type:Boolean,default:!1},clickTarget:{},variant:{default:"primary"},size:{default:"medium"},iconOnly:{type:Boolean,default:!1},iconRight:{type:Boolean},text:{},className:{},iconDefinition:{},iconClass:{},src:{},svgRaw:{}},setup(c){const t=c,i=l=>"href"in l&&l.href!==void 0||"to"in l&&l.to!==void 0,a=e.computed(()=>n.cn("phila-button",`phila-button--${t.variant}`,t.size&&`is-${t.size}`,t.iconOnly&&"icon-button",t.iconOnly&&t.variant==="standard"&&"icon-button--standard",t.className)),r=e.computed(()=>i(t)?"to"in t&&t.to!==void 0?{to:t.to,disabled:t.disabled,className:a.value}:{href:t.href,target:t.target,rel:t.rel,disabled:t.disabled,className:a.value}:{}),s=e.computed(()=>({iconDefinition:t.iconDefinition,iconClass:t.iconClass,src:t.src,iconRight:t.iconRight,iconOnly:t.iconOnly,text:t.text,size:t.size}));return(l,p)=>i(t)?(e.openBlock(),e.createBlock(e.unref(n.BaseLink),e.mergeProps({key:0},{...r.value,...l.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(n.ActionContent),e.normalizeProps(e.guardReactiveProps(s.value)),{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)]),_:3},16)):(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:1,type:"button",disabled:t.disabled,class:a.value},l.$attrs),[e.createVNode(e.unref(n.ActionContent),e.normalizeProps(e.guardReactiveProps(s.value)),{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)],16,k))}});var V={prefix:"fas",iconName:"circle-exclamation",icon:[512,512,["exclamation-circle"],"f06a","M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]},B=V,C={prefix:"fas",iconName:"xmark",icon:[384,512,[128473,10005,10006,10060,215,"close","multiply","remove","times"],"f00d","M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]},z=C;const S=["for"],P={class:"state-layer"},$={class:"content"},D={class:"input-text-container"},w=["id","placeholder","aria-label"],E={key:1,class:"has-text-body-small phila-supporting-text"},O={key:2,class:"has-text-body-small phila-error-text"},R=e.defineComponent({inheritAttrs:!1,__name:"TextField",props:{modelValue:{default:void 0},className:{default:""},label:{default:""},id:{default:`phila-text-field-${Math.random().toString(36).substring(2,9)}`},supportingText:{default:""},placeholder:{default:""},leadingIcon:{default:""},trailingIcon:{default:""},error:{default(){return[]}}},emits:["update:modelValue"],setup(c,{emit:t}){const i=e.useAttrs(),a=c,r=e.computed(()=>typeof a.error=="string"?a.error:a.error[0]),s=e.toRef(a,"id"),l=t,p=e.ref(""),u=e.computed({get:()=>a.modelValue!==void 0?a.modelValue:p.value,set:o=>{l("update:modelValue",o),p.value=o}}),m=e.computed(()=>{const o=["default-class"];return i.disabled!=null&&o.push("phila-input--disabled"),r.value&&o.push("phila-input--error"),i.required!=null&&o.push("phila-input--required"),n.cn(...o)}),d=e.computed(()=>{const o=[];return u.value!==""&&o.push("phila-text-field--filled"),a.className&&o.push(a.className),n.cn(...o)}),f=e.computed(()=>{if(!(a.label||i["aria-label"]))return a.placeholder||void 0}),v=e.ref(null),g=o=>{o.target.closest("button")||v.value?.focus()};return(o,h)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["phila-input",m.value])},[a.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:s.value,class:"has-text-label-small phila-label"},e.toDisplayString(a.label),9,S)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["phila-text-field",d.value]),onClick:g},[e.createElementVNode("div",P,[a.leadingIcon?(e.openBlock(),e.createBlock(e.unref(n.Icon),{key:0,"icon-class":a.leadingIcon,inline:"",decorative:""},null,8,["icon-class"])):e.createCommentVNode("",!0),e.createElementVNode("div",$,[e.createElementVNode("div",D,[e.withDirectives(e.createElementVNode("input",e.mergeProps({id:s.value,ref_key:"inputRef",ref:v,"onUpdate:modelValue":h[0]||(h[0]=b=>u.value=b),class:"phila-text-field-input has-text-body-default",placeholder:a.placeholder,"aria-label":f.value},e.unref(i)),null,16,w),[[e.vModelDynamic,u.value]])])]),u.value!=""?(e.openBlock(),e.createBlock(e.unref(N),{key:1,variant:"standard",size:"small","icon-only":"","icon-definition":e.unref(z),onClick:h[1]||(h[1]=b=>u.value="")},null,8,["icon-definition"])):e.createCommentVNode("",!0),a.trailingIcon?(e.openBlock(),e.createBlock(e.unref(n.Icon),{key:2,size:"small","icon-class":a.trailingIcon,inline:"",decorative:""},null,8,["icon-class"])):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"trailing-action")])],2),a.supportingText?(e.openBlock(),e.createElementBlock("div",E,e.toDisplayString(a.supportingText),1)):e.createCommentVNode("",!0),r.value?(e.openBlock(),e.createElementBlock("div",O,[e.createVNode(e.unref(n.Icon),{"icon-definition":e.unref(B),size:"small",inline:"",decorative:""},null,8,["icon-definition"]),e.createTextVNode(" "+e.toDisplayString(r.value),1)])):e.createCommentVNode("",!0)],2))}}),_=["disabled"],T=e.defineComponent({inheritAttrs:!1,__name:"PhlButton",props:{href:{},to:{},target:{},rel:{},disabled:{type:Boolean,default:!1},clickTarget:{},variant:{default:"primary"},size:{default:"medium"},iconOnly:{type:Boolean,default:!1},iconRight:{type:Boolean},text:{},className:{},iconDefinition:{},iconClass:{},src:{},svgRaw:{}},setup(c){const t=c,i=l=>"href"in l&&l.href!==void 0||"to"in l&&l.to!==void 0,a=e.computed(()=>n.cn("phila-button",`phila-button--${t.variant}`,t.size&&`is-${t.size}`,t.iconOnly&&"icon-button",t.iconOnly&&t.variant==="standard"&&"icon-button--standard",t.className)),r=e.computed(()=>i(t)?"to"in t&&t.to!==void 0?{to:t.to,disabled:t.disabled,className:a.value}:{href:t.href,target:t.target,rel:t.rel,disabled:t.disabled,className:a.value}:{}),s=e.computed(()=>({iconDefinition:t.iconDefinition,iconClass:t.iconClass,src:t.src,iconRight:t.iconRight,iconOnly:t.iconOnly,text:t.text,size:t.size}));return(l,p)=>i(t)?(e.openBlock(),e.createBlock(e.unref(n.BaseLink),e.mergeProps({key:0},{...r.value,...l.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(n.ActionContent),e.normalizeProps(e.guardReactiveProps(s.value)),{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)]),_:3},16)):(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:1,type:"button",disabled:t.disabled,class:a.value},l.$attrs),[e.createVNode(e.unref(n.ActionContent),e.normalizeProps(e.guardReactiveProps(s.value)),{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},16)],16,_))}}),A=e.defineComponent({inheritAttrs:!1,__name:"Search",props:{modelValue:{default:void 0},placeholder:{default:"Search by title or keyword"},className:{}},emits:["update:modelValue","search"],setup(c,{emit:t}){const i=e.useAttrs(),a=c,r=t,s=e.computed({get:()=>a.modelValue,set:m=>r("update:modelValue",m)}),l=e.computed(()=>i["aria-label"]),p=e.computed(()=>Object.fromEntries(Object.entries(i).filter(([m])=>m!=="aria-label"))),u=e.computed(()=>n.cn("default-class",a.className));return(m,d)=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({class:["search",u.value]},p.value),[e.createVNode(e.unref(R),{modelValue:s.value,"onUpdate:modelValue":d[1]||(d[1]=f=>s.value=f),"class-name":"phila-text-field--search",placeholder:c.placeholder,"aria-label":l.value,onKeydown:d[2]||(d[2]=e.withKeys(f=>r("search"),["enter"]))},{"trailing-action":e.withCtx(()=>[e.createVNode(e.unref(T),{variant:"standard",size:"small","icon-only":"","icon-definition":e.unref(x),"aria-label":"Search","class-name":"phila-button--search",onClick:d[0]||(d[0]=f=>r("search"))},null,8,["icon-definition"])]),_:1},8,["modelValue","placeholder","aria-label"])],16))}});exports.Search=A;
|
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { cn as
|
|
3
|
-
import './index.css';var
|
|
1
|
+
import { defineComponent as D, useAttrs as I, computed as n, toRef as E, ref as M, createElementBlock as p, openBlock as o, normalizeClass as A, createCommentVNode as g, createElementVNode as k, toDisplayString as m, createBlock as N, renderSlot as V, unref as l, withDirectives as j, mergeProps as x, vModelDynamic as K, createVNode as h, createTextVNode as $, withCtx as v, normalizeProps as _, guardReactiveProps as B, withKeys as U } from "vue";
|
|
2
|
+
import { cn as C, Icon as L, BaseLink as T, ActionContent as R } from "@phila/phila-ui-core";
|
|
3
|
+
import './index.css';var q = {
|
|
4
4
|
prefix: "fas",
|
|
5
5
|
iconName: "magnifying-glass",
|
|
6
6
|
icon: [512, 512, [128269, "search"], "f002", "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"]
|
|
7
|
-
}, G =
|
|
8
|
-
const
|
|
7
|
+
}, G = q;
|
|
8
|
+
const F = ["disabled"], H = /* @__PURE__ */ D({
|
|
9
9
|
inheritAttrs: !1,
|
|
10
10
|
__name: "PhlButton",
|
|
11
11
|
props: {
|
|
@@ -26,25 +26,25 @@ const j = ["disabled"], F = /* @__PURE__ */ O({
|
|
|
26
26
|
src: {},
|
|
27
27
|
svgRaw: {}
|
|
28
28
|
},
|
|
29
|
-
setup(
|
|
30
|
-
const e =
|
|
29
|
+
setup(d) {
|
|
30
|
+
const e = d, s = (t) => "href" in t && t.href !== void 0 || "to" in t && t.to !== void 0, a = n(() => C(
|
|
31
31
|
"phila-button",
|
|
32
32
|
`phila-button--${e.variant}`,
|
|
33
33
|
e.size && `is-${e.size}`,
|
|
34
34
|
e.iconOnly && "icon-button",
|
|
35
35
|
e.iconOnly && e.variant === "standard" && "icon-button--standard",
|
|
36
36
|
e.className
|
|
37
|
-
)),
|
|
37
|
+
)), r = n(() => s(e) ? "to" in e && e.to !== void 0 ? {
|
|
38
38
|
to: e.to,
|
|
39
39
|
disabled: e.disabled,
|
|
40
|
-
className:
|
|
40
|
+
className: a.value
|
|
41
41
|
} : {
|
|
42
42
|
href: e.href,
|
|
43
43
|
target: e.target,
|
|
44
44
|
rel: e.rel,
|
|
45
45
|
disabled: e.disabled,
|
|
46
|
-
className:
|
|
47
|
-
} : {}),
|
|
46
|
+
className: a.value
|
|
47
|
+
} : {}), c = n(
|
|
48
48
|
() => ({
|
|
49
49
|
iconDefinition: e.iconDefinition,
|
|
50
50
|
iconClass: e.iconClass,
|
|
@@ -55,51 +55,51 @@ const j = ["disabled"], F = /* @__PURE__ */ O({
|
|
|
55
55
|
size: e.size
|
|
56
56
|
})
|
|
57
57
|
);
|
|
58
|
-
return (
|
|
59
|
-
default:
|
|
60
|
-
|
|
61
|
-
default:
|
|
62
|
-
|
|
63
|
-
|
|
58
|
+
return (t, b) => s(e) ? (o(), N(l(T), x({ key: 0 }, { ...r.value, ...t.$attrs }, { role: "button" }), {
|
|
59
|
+
default: v(() => [
|
|
60
|
+
h(l(R), _(B(c.value)), {
|
|
61
|
+
default: v(() => [
|
|
62
|
+
V(t.$slots, "default", {}, () => [
|
|
63
|
+
$(m(e.text), 1)
|
|
64
64
|
])
|
|
65
65
|
]),
|
|
66
66
|
_: 3
|
|
67
67
|
}, 16)
|
|
68
68
|
]),
|
|
69
69
|
_: 3
|
|
70
|
-
}, 16)) : (
|
|
70
|
+
}, 16)) : (o(), p("button", x({
|
|
71
71
|
key: 1,
|
|
72
72
|
type: "button",
|
|
73
73
|
disabled: e.disabled,
|
|
74
|
-
class:
|
|
75
|
-
},
|
|
76
|
-
|
|
77
|
-
default:
|
|
78
|
-
|
|
79
|
-
|
|
74
|
+
class: a.value
|
|
75
|
+
}, t.$attrs), [
|
|
76
|
+
h(l(R), _(B(c.value)), {
|
|
77
|
+
default: v(() => [
|
|
78
|
+
V(t.$slots, "default", {}, () => [
|
|
79
|
+
$(m(e.text), 1)
|
|
80
80
|
])
|
|
81
81
|
]),
|
|
82
82
|
_: 3
|
|
83
83
|
}, 16)
|
|
84
|
-
], 16,
|
|
84
|
+
], 16, F));
|
|
85
85
|
}
|
|
86
86
|
});
|
|
87
|
-
var
|
|
87
|
+
var J = {
|
|
88
88
|
prefix: "fas",
|
|
89
89
|
iconName: "circle-exclamation",
|
|
90
90
|
icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
|
|
91
|
-
},
|
|
91
|
+
}, Q = J, W = {
|
|
92
92
|
prefix: "fas",
|
|
93
93
|
iconName: "xmark",
|
|
94
94
|
icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M55.1 73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L147.2 256 9.9 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192.5 301.3 329.9 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.8 256 375.1 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192.5 210.7 55.1 73.4z"]
|
|
95
|
-
},
|
|
96
|
-
const
|
|
95
|
+
}, X = W;
|
|
96
|
+
const Y = ["for"], Z = { class: "state-layer" }, ee = { class: "content" }, ae = { class: "input-text-container" }, te = ["id", "placeholder", "aria-label"], le = {
|
|
97
97
|
key: 1,
|
|
98
98
|
class: "has-text-body-small phila-supporting-text"
|
|
99
|
-
},
|
|
99
|
+
}, ie = {
|
|
100
100
|
key: 2,
|
|
101
101
|
class: "has-text-body-small phila-error-text"
|
|
102
|
-
},
|
|
102
|
+
}, ne = /* @__PURE__ */ D({
|
|
103
103
|
inheritAttrs: !1,
|
|
104
104
|
__name: "TextField",
|
|
105
105
|
props: {
|
|
@@ -116,85 +116,89 @@ const X = ["for"], Y = { class: "state-layer" }, Z = { class: "content" }, ee =
|
|
|
116
116
|
} }
|
|
117
117
|
},
|
|
118
118
|
emits: ["update:modelValue"],
|
|
119
|
-
setup(
|
|
120
|
-
const
|
|
121
|
-
get: () =>
|
|
119
|
+
setup(d, { emit: e }) {
|
|
120
|
+
const s = I(), a = d, r = n(() => typeof a.error == "string" ? a.error : a.error[0]), c = E(a, "id"), t = e, b = M(""), f = n({
|
|
121
|
+
get: () => a.modelValue !== void 0 ? a.modelValue : b.value,
|
|
122
122
|
set: (i) => {
|
|
123
|
-
|
|
123
|
+
t("update:modelValue", i), b.value = i;
|
|
124
124
|
}
|
|
125
|
-
}),
|
|
125
|
+
}), y = n(() => {
|
|
126
126
|
const i = ["default-class"];
|
|
127
|
-
return
|
|
128
|
-
}),
|
|
127
|
+
return s.disabled != null && i.push("phila-input--disabled"), r.value && i.push("phila-input--error"), s.required != null && i.push("phila-input--required"), C(...i);
|
|
128
|
+
}), u = n(() => {
|
|
129
129
|
const i = [];
|
|
130
|
-
return
|
|
131
|
-
}),
|
|
132
|
-
|
|
130
|
+
return f.value !== "" && i.push("phila-text-field--filled"), a.className && i.push(a.className), C(...i);
|
|
131
|
+
}), z = n(() => {
|
|
132
|
+
if (!(a.label || s["aria-label"]))
|
|
133
|
+
return a.placeholder || void 0;
|
|
134
|
+
}), S = M(null), P = (i) => {
|
|
135
|
+
i.target.closest("button") || S.value?.focus();
|
|
133
136
|
};
|
|
134
|
-
return (i,
|
|
135
|
-
class:
|
|
137
|
+
return (i, O) => (o(), p("div", {
|
|
138
|
+
class: A(["phila-input", y.value])
|
|
136
139
|
}, [
|
|
137
|
-
|
|
140
|
+
a.label ? (o(), p("label", {
|
|
138
141
|
key: 0,
|
|
139
|
-
for:
|
|
142
|
+
for: c.value,
|
|
140
143
|
class: "has-text-label-small phila-label"
|
|
141
|
-
}, m(
|
|
142
|
-
|
|
143
|
-
class:
|
|
144
|
-
onClick:
|
|
144
|
+
}, m(a.label), 9, Y)) : g("", !0),
|
|
145
|
+
k("div", {
|
|
146
|
+
class: A(["phila-text-field", u.value]),
|
|
147
|
+
onClick: P
|
|
145
148
|
}, [
|
|
146
|
-
|
|
147
|
-
|
|
149
|
+
k("div", Z, [
|
|
150
|
+
a.leadingIcon ? (o(), N(l(L), {
|
|
148
151
|
key: 0,
|
|
149
|
-
"icon-class":
|
|
152
|
+
"icon-class": a.leadingIcon,
|
|
150
153
|
inline: "",
|
|
151
154
|
decorative: ""
|
|
152
|
-
}, null, 8, ["icon-class"])) :
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
id:
|
|
155
|
+
}, null, 8, ["icon-class"])) : g("", !0),
|
|
156
|
+
k("div", ee, [
|
|
157
|
+
k("div", ae, [
|
|
158
|
+
j(k("input", x({
|
|
159
|
+
id: c.value,
|
|
157
160
|
ref_key: "inputRef",
|
|
158
|
-
ref:
|
|
159
|
-
"onUpdate:modelValue":
|
|
161
|
+
ref: S,
|
|
162
|
+
"onUpdate:modelValue": O[0] || (O[0] = (w) => f.value = w),
|
|
160
163
|
class: "phila-text-field-input has-text-body-default",
|
|
161
|
-
placeholder:
|
|
162
|
-
|
|
163
|
-
|
|
164
|
+
placeholder: a.placeholder,
|
|
165
|
+
"aria-label": z.value
|
|
166
|
+
}, l(s)), null, 16, te), [
|
|
167
|
+
[K, f.value]
|
|
164
168
|
])
|
|
165
169
|
])
|
|
166
170
|
]),
|
|
167
|
-
|
|
171
|
+
f.value != "" ? (o(), N(l(H), {
|
|
168
172
|
key: 1,
|
|
169
173
|
variant: "standard",
|
|
170
174
|
size: "small",
|
|
171
175
|
"icon-only": "",
|
|
172
|
-
"icon-definition": l(
|
|
173
|
-
onClick:
|
|
174
|
-
}, null, 8, ["icon-definition"])) :
|
|
175
|
-
|
|
176
|
+
"icon-definition": l(X),
|
|
177
|
+
onClick: O[1] || (O[1] = (w) => f.value = "")
|
|
178
|
+
}, null, 8, ["icon-definition"])) : g("", !0),
|
|
179
|
+
a.trailingIcon ? (o(), N(l(L), {
|
|
176
180
|
key: 2,
|
|
177
181
|
size: "small",
|
|
178
|
-
"icon-class":
|
|
182
|
+
"icon-class": a.trailingIcon,
|
|
179
183
|
inline: "",
|
|
180
184
|
decorative: ""
|
|
181
|
-
}, null, 8, ["icon-class"])) :
|
|
182
|
-
|
|
185
|
+
}, null, 8, ["icon-class"])) : g("", !0),
|
|
186
|
+
V(i.$slots, "trailing-action")
|
|
183
187
|
])
|
|
184
188
|
], 2),
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
"icon-definition": l(
|
|
189
|
+
a.supportingText ? (o(), p("div", le, m(a.supportingText), 1)) : g("", !0),
|
|
190
|
+
r.value ? (o(), p("div", ie, [
|
|
191
|
+
h(l(L), {
|
|
192
|
+
"icon-definition": l(Q),
|
|
189
193
|
size: "small",
|
|
190
194
|
inline: "",
|
|
191
195
|
decorative: ""
|
|
192
196
|
}, null, 8, ["icon-definition"]),
|
|
193
|
-
|
|
194
|
-
])) :
|
|
197
|
+
$(" " + m(r.value), 1)
|
|
198
|
+
])) : g("", !0)
|
|
195
199
|
], 2));
|
|
196
200
|
}
|
|
197
|
-
}),
|
|
201
|
+
}), se = ["disabled"], oe = /* @__PURE__ */ D({
|
|
198
202
|
inheritAttrs: !1,
|
|
199
203
|
__name: "PhlButton",
|
|
200
204
|
props: {
|
|
@@ -215,25 +219,25 @@ const X = ["for"], Y = { class: "state-layer" }, Z = { class: "content" }, ee =
|
|
|
215
219
|
src: {},
|
|
216
220
|
svgRaw: {}
|
|
217
221
|
},
|
|
218
|
-
setup(
|
|
219
|
-
const e =
|
|
222
|
+
setup(d) {
|
|
223
|
+
const e = d, s = (t) => "href" in t && t.href !== void 0 || "to" in t && t.to !== void 0, a = n(() => C(
|
|
220
224
|
"phila-button",
|
|
221
225
|
`phila-button--${e.variant}`,
|
|
222
226
|
e.size && `is-${e.size}`,
|
|
223
227
|
e.iconOnly && "icon-button",
|
|
224
228
|
e.iconOnly && e.variant === "standard" && "icon-button--standard",
|
|
225
229
|
e.className
|
|
226
|
-
)),
|
|
230
|
+
)), r = n(() => s(e) ? "to" in e && e.to !== void 0 ? {
|
|
227
231
|
to: e.to,
|
|
228
232
|
disabled: e.disabled,
|
|
229
|
-
className:
|
|
233
|
+
className: a.value
|
|
230
234
|
} : {
|
|
231
235
|
href: e.href,
|
|
232
236
|
target: e.target,
|
|
233
237
|
rel: e.rel,
|
|
234
238
|
disabled: e.disabled,
|
|
235
|
-
className:
|
|
236
|
-
} : {}),
|
|
239
|
+
className: a.value
|
|
240
|
+
} : {}), c = n(
|
|
237
241
|
() => ({
|
|
238
242
|
iconDefinition: e.iconDefinition,
|
|
239
243
|
iconClass: e.iconClass,
|
|
@@ -244,35 +248,35 @@ const X = ["for"], Y = { class: "state-layer" }, Z = { class: "content" }, ee =
|
|
|
244
248
|
size: e.size
|
|
245
249
|
})
|
|
246
250
|
);
|
|
247
|
-
return (
|
|
248
|
-
default:
|
|
249
|
-
|
|
250
|
-
default:
|
|
251
|
-
|
|
252
|
-
|
|
251
|
+
return (t, b) => s(e) ? (o(), N(l(T), x({ key: 0 }, { ...r.value, ...t.$attrs }, { role: "button" }), {
|
|
252
|
+
default: v(() => [
|
|
253
|
+
h(l(R), _(B(c.value)), {
|
|
254
|
+
default: v(() => [
|
|
255
|
+
V(t.$slots, "default", {}, () => [
|
|
256
|
+
$(m(e.text), 1)
|
|
253
257
|
])
|
|
254
258
|
]),
|
|
255
259
|
_: 3
|
|
256
260
|
}, 16)
|
|
257
261
|
]),
|
|
258
262
|
_: 3
|
|
259
|
-
}, 16)) : (
|
|
263
|
+
}, 16)) : (o(), p("button", x({
|
|
260
264
|
key: 1,
|
|
261
265
|
type: "button",
|
|
262
266
|
disabled: e.disabled,
|
|
263
|
-
class:
|
|
264
|
-
},
|
|
265
|
-
|
|
266
|
-
default:
|
|
267
|
-
|
|
268
|
-
|
|
267
|
+
class: a.value
|
|
268
|
+
}, t.$attrs), [
|
|
269
|
+
h(l(R), _(B(c.value)), {
|
|
270
|
+
default: v(() => [
|
|
271
|
+
V(t.$slots, "default", {}, () => [
|
|
272
|
+
$(m(e.text), 1)
|
|
269
273
|
])
|
|
270
274
|
]),
|
|
271
275
|
_: 3
|
|
272
276
|
}, 16)
|
|
273
|
-
], 16,
|
|
277
|
+
], 16, se));
|
|
274
278
|
}
|
|
275
|
-
}),
|
|
279
|
+
}), de = /* @__PURE__ */ D({
|
|
276
280
|
inheritAttrs: !1,
|
|
277
281
|
__name: "Search",
|
|
278
282
|
props: {
|
|
@@ -281,37 +285,38 @@ const X = ["for"], Y = { class: "state-layer" }, Z = { class: "content" }, ee =
|
|
|
281
285
|
className: {}
|
|
282
286
|
},
|
|
283
287
|
emits: ["update:modelValue", "search"],
|
|
284
|
-
setup(
|
|
285
|
-
const
|
|
286
|
-
get: () =>
|
|
287
|
-
set: (
|
|
288
|
-
}),
|
|
289
|
-
return (
|
|
290
|
-
class: ["search",
|
|
291
|
-
},
|
|
292
|
-
|
|
293
|
-
modelValue:
|
|
294
|
-
"onUpdate:modelValue":
|
|
288
|
+
setup(d, { emit: e }) {
|
|
289
|
+
const s = I(), a = d, r = e, c = n({
|
|
290
|
+
get: () => a.modelValue,
|
|
291
|
+
set: (y) => r("update:modelValue", y)
|
|
292
|
+
}), t = n(() => s["aria-label"]), b = n(() => Object.fromEntries(Object.entries(s).filter(([y]) => y !== "aria-label"))), f = n(() => C("default-class", a.className));
|
|
293
|
+
return (y, u) => (o(), p("div", x({
|
|
294
|
+
class: ["search", f.value]
|
|
295
|
+
}, b.value), [
|
|
296
|
+
h(l(ne), {
|
|
297
|
+
modelValue: c.value,
|
|
298
|
+
"onUpdate:modelValue": u[1] || (u[1] = (z) => c.value = z),
|
|
295
299
|
"class-name": "phila-text-field--search",
|
|
296
|
-
placeholder:
|
|
297
|
-
|
|
300
|
+
placeholder: d.placeholder,
|
|
301
|
+
"aria-label": t.value,
|
|
302
|
+
onKeydown: u[2] || (u[2] = U((z) => r("search"), ["enter"]))
|
|
298
303
|
}, {
|
|
299
|
-
"trailing-action":
|
|
300
|
-
|
|
304
|
+
"trailing-action": v(() => [
|
|
305
|
+
h(l(oe), {
|
|
301
306
|
variant: "standard",
|
|
302
307
|
size: "small",
|
|
303
308
|
"icon-only": "",
|
|
304
309
|
"icon-definition": l(G),
|
|
305
310
|
"aria-label": "Search",
|
|
306
311
|
"class-name": "phila-button--search",
|
|
307
|
-
onClick:
|
|
312
|
+
onClick: u[0] || (u[0] = (z) => r("search"))
|
|
308
313
|
}, null, 8, ["icon-definition"])
|
|
309
314
|
]),
|
|
310
315
|
_: 1
|
|
311
|
-
}, 8, ["modelValue", "placeholder"])
|
|
316
|
+
}, 8, ["modelValue", "placeholder", "aria-label"])
|
|
312
317
|
], 16));
|
|
313
318
|
}
|
|
314
319
|
});
|
|
315
320
|
export {
|
|
316
|
-
|
|
321
|
+
de as Search
|
|
317
322
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-search",
|
|
3
|
-
"version": "1.1.1-beta.
|
|
3
|
+
"version": "1.1.1-beta.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "a search bar",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@phila/phila-ui-core": "2.3.1-beta.0",
|
|
36
|
-
"@phila/phila-ui-text-field": "1.1.1-beta.
|
|
36
|
+
"@phila/phila-ui-text-field": "1.1.1-beta.1",
|
|
37
37
|
"@phila/phila-ui-button": "2.2.1-beta.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|