@phila/phila-ui-search 1.1.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.css +1 -1
- package/dist/index.js +1 -1
- package/dist/index.mjs +110 -109
- package/package.json +4 -4
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.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.phila-text-field .phila-button{color:var(--Schemes-On-Surface)!important}.phila-input--required .phila-label:after{content:"*";padding-left:.125rem}.phila-input{display:flex;flex-direction:column}.phila-input:focus-within .phila-label{color:var(--Schemes-Primary)}.phila-input .phila-label{color:var(--Schemes-On-Surface)}.phila-input .phila-label--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-text-field{box-sizing:border-box;border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--Schemes-Border);border-radius:var(--border-radius-s);background-color:var(--Schemes-Background);display:flex;width:25rem;padding:0 var(--spacing-2xs) 0 var(--spacing-xs);flex-direction:column;align-items:center;gap:.625rem;flex:1 0 0;cursor:text}.phila-input .phila-text-field:focus-within{box-shadow:none;border:2px solid var(--Schemes-Primary)}.phila-input .phila-text-field:hover:not(:focus-within){background-color:var(--Schemes-Background)}.phila-input .phila-text-field button{cursor:pointer}.phila-input .phila-text-field button:focus{z-index:1}.phila-input .phila-text-field--filled{background-color:var(--Schemes-Background);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--Schemes-On-Surface)}.phila-input .phila-text-field--filled:focus-within{box-shadow:none;border:2px solid var(--Schemes-Primary)}.phila-input .state-layer{display:flex;padding:var(--spacing-2xs, .25rem) var(--spacing-xs, .5rem);align-items:center;gap:.5rem;flex:1 0 0;align-self:stretch}.phila-input .content{display:flex;height:var(--dimension-core-600);padding:var(--spacing-2xs, .25rem) 0;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.phila-input .input-text-container{display:flex;align-items:center;gap:.125rem;align-self:stretch;width:100%}.phila-input .phila-text-field-input{width:100%;background-color:inherit;border:none;color:var(--Schemes-On-Surface, #000)}.phila-input .phila-text-field-input:focus{outline:none}.phila-input .phila-text-field-input:focus-visible{outline:none}.phila-input .phila-text-field-input::placeholder{color:var(--Schemes-Surface-Container-Highest);font-family:var(--Static-Body-Large-Font);font-size:var(--Static-Body-Large-Size);font-style:normal;font-weight:400;line-height:var(--Static-Body-Large-Line-Height);letter-spacing:var(--Static-Body-Large-Tracking)}.phila-input .phila-supporting-text--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-supporting-text{color:var(--Schemes-On-Surface)}.phila-input .phila-error-text{color:var(--Schemes-Error);display:flex;align-items:center}.phila-input--error:focus-within .phila-label{color:var(--Schemes-Error)}.phila-input--error .phila-label{color:var(--Schemes-Error)}.phila-input--error .phila-text-field{background-color:var(--Schemes-Background);border-color:var(--Schemes-Error);border-width:2px;border-style:solid;box-shadow:none}.phila-input--error .phila-text-field:focus-within{background-color:var(--Schemes-Background);border-color:var(--Schemes-Error);border-width:2px;border-style:solid}.phila-input--disabled{cursor:not-allowed}.phila-input--disabled .phila-label{cursor:not-allowed;color:var(--Schemes-Surface-Container-High)}.phila-input--disabled .phila-text-field{cursor:not-allowed;color:var(--Schemes-Surface-Container-High);border-color:var(--Schemes-Surface-Container-High);border-width:1px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--disabled .phila-supporting-text{color:var(--Schemes-Surface-Container-High)}.search{display:flex;width:48.8125rem;align-items:center}.search .phila-input,.phila-input .phila-text-field.phila-text-field--search{width:100%}.phila-button--search.phila-button{border-radius:0}
|
|
1
|
+
.phila-text-field .phila-button{color:var(--Schemes-On-Surface)!important}.phila-input--required .phila-label:after{content:"*";padding-left:.125rem}.phila-input{display:flex;flex-direction:column}.phila-input:focus-within .phila-label{color:var(--Schemes-Primary)}.phila-input .phila-label{color:var(--Schemes-On-Surface)}.phila-input .phila-label--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-text-field{box-sizing:border-box;border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--Schemes-Border);border-radius:var(--border-radius-s);background-color:var(--Schemes-Background);background-clip:padding-box;display:flex;width:25rem;padding:0 var(--spacing-2xs) 0 var(--spacing-xs);flex-direction:column;align-items:center;gap:.625rem;flex:1 0 0;cursor:text}.phila-input .phila-text-field:focus-within{box-shadow:none;border:2px solid var(--Schemes-Primary)}.phila-input .phila-text-field:hover:not(:focus-within){background-color:var(--Schemes-Background)}.phila-input .phila-text-field button{cursor:pointer}.phila-input .phila-text-field button:focus{z-index:1}.phila-input .phila-text-field--filled{background-color:var(--Schemes-Background);border:2px solid transparent;box-shadow:inset 0 0 0 1px var(--Schemes-On-Surface)}.phila-input .phila-text-field--filled:focus-within{box-shadow:none;border:2px solid var(--Schemes-Primary)}.phila-input .state-layer{display:flex;padding:var(--spacing-2xs, .25rem) var(--spacing-xs, .5rem);align-items:center;gap:.5rem;flex:1 0 0;align-self:stretch}.phila-input .content{display:flex;height:var(--dimension-core-600);padding:var(--spacing-2xs, .25rem) 0;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 0 0}.phila-input .input-text-container{display:flex;align-items:center;gap:.125rem;align-self:stretch;width:100%}.phila-input .phila-text-field-input{width:100%;background-color:inherit;border:none;color:var(--Schemes-On-Surface, #000)}.phila-input .phila-text-field-input:focus{outline:none}.phila-input .phila-text-field-input:focus-visible{outline:none}.phila-input .phila-text-field-input::placeholder{color:var(--Schemes-Surface-Container-Highest);font-family:var(--Static-Body-Large-Font);font-size:var(--Static-Body-Large-Size);font-style:normal;font-weight:400;line-height:var(--Static-Body-Large-Line-Height);letter-spacing:var(--Static-Body-Large-Tracking)}.phila-input .phila-supporting-text--disabled{color:var(--Schemes-Surface-Container-High)}.phila-input .phila-supporting-text{color:var(--Schemes-On-Surface)}.phila-input .phila-error-text{color:var(--Schemes-Error);display:flex;align-items:center}.phila-input--error:focus-within .phila-label{color:var(--Schemes-Error)}.phila-input--error .phila-label{color:var(--Schemes-Error)}.phila-input--error .phila-text-field{background-color:var(--Schemes-Background);border-color:var(--Schemes-Error);border-width:2px;border-style:solid;box-shadow:none}.phila-input--error .phila-text-field:focus-within{background-color:var(--Schemes-Background);border-color:var(--Schemes-Error);border-width:2px;border-style:solid}.phila-input--disabled{cursor:not-allowed}.phila-input--disabled .phila-label{cursor:not-allowed;color:var(--Schemes-Surface-Container-High)}.phila-input--disabled .phila-text-field{cursor:not-allowed;color:var(--Schemes-Surface-Container-High);border-color:var(--Schemes-Surface-Container-High);border-width:1px;border-style:solid;background-color:var(--Schemes-Surface-Container-Lowest)}.phila-input--disabled .phila-supporting-text{color:var(--Schemes-Surface-Container-High)}.search{display:flex;width:48.8125rem;align-items:center}.search .phila-input,.phila-input .phila-text-field.phila-text-field--search{width:100%}.phila-button--search.phila-button{border-radius:0}
|
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,15 +26,15 @@ const j = ["disabled"], F = /* @__PURE__ */ B({
|
|
|
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
40
|
className: a.value
|
|
@@ -44,7 +44,7 @@ const j = ["disabled"], F = /* @__PURE__ */ B({
|
|
|
44
44
|
rel: e.rel,
|
|
45
45
|
disabled: e.disabled,
|
|
46
46
|
className: a.value
|
|
47
|
-
} : {}), c =
|
|
47
|
+
} : {}), c = n(
|
|
48
48
|
() => ({
|
|
49
49
|
iconDefinition: e.iconDefinition,
|
|
50
50
|
iconClass: e.iconClass,
|
|
@@ -52,55 +52,54 @@ const j = ["disabled"], F = /* @__PURE__ */ B({
|
|
|
52
52
|
iconRight: e.iconRight,
|
|
53
53
|
iconOnly: e.iconOnly,
|
|
54
54
|
text: e.text,
|
|
55
|
-
size: e.size
|
|
56
|
-
shadow: e.iconOnly && e.variant === "standard"
|
|
55
|
+
size: e.size
|
|
57
56
|
})
|
|
58
57
|
);
|
|
59
|
-
return (t,
|
|
60
|
-
default:
|
|
61
|
-
|
|
62
|
-
default:
|
|
63
|
-
|
|
64
|
-
|
|
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)
|
|
65
64
|
])
|
|
66
65
|
]),
|
|
67
66
|
_: 3
|
|
68
67
|
}, 16)
|
|
69
68
|
]),
|
|
70
69
|
_: 3
|
|
71
|
-
}, 16)) : (
|
|
70
|
+
}, 16)) : (o(), p("button", x({
|
|
72
71
|
key: 1,
|
|
73
72
|
type: "button",
|
|
74
73
|
disabled: e.disabled,
|
|
75
74
|
class: a.value
|
|
76
75
|
}, t.$attrs), [
|
|
77
|
-
|
|
78
|
-
default:
|
|
79
|
-
|
|
80
|
-
|
|
76
|
+
h(l(R), _(B(c.value)), {
|
|
77
|
+
default: v(() => [
|
|
78
|
+
V(t.$slots, "default", {}, () => [
|
|
79
|
+
$(m(e.text), 1)
|
|
81
80
|
])
|
|
82
81
|
]),
|
|
83
82
|
_: 3
|
|
84
83
|
}, 16)
|
|
85
|
-
], 16,
|
|
84
|
+
], 16, F));
|
|
86
85
|
}
|
|
87
86
|
});
|
|
88
|
-
var
|
|
87
|
+
var J = {
|
|
89
88
|
prefix: "fas",
|
|
90
89
|
iconName: "circle-exclamation",
|
|
91
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"]
|
|
92
|
-
},
|
|
91
|
+
}, Q = J, W = {
|
|
93
92
|
prefix: "fas",
|
|
94
93
|
iconName: "xmark",
|
|
95
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"]
|
|
96
|
-
},
|
|
97
|
-
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 = {
|
|
98
97
|
key: 1,
|
|
99
98
|
class: "has-text-body-small phila-supporting-text"
|
|
100
|
-
},
|
|
99
|
+
}, ie = {
|
|
101
100
|
key: 2,
|
|
102
101
|
class: "has-text-body-small phila-error-text"
|
|
103
|
-
},
|
|
102
|
+
}, ne = /* @__PURE__ */ D({
|
|
104
103
|
inheritAttrs: !1,
|
|
105
104
|
__name: "TextField",
|
|
106
105
|
props: {
|
|
@@ -117,87 +116,89 @@ const X = ["for"], Y = { class: "state-layer" }, Z = { class: "content" }, ee =
|
|
|
117
116
|
} }
|
|
118
117
|
},
|
|
119
118
|
emits: ["update:modelValue"],
|
|
120
|
-
setup(
|
|
121
|
-
const
|
|
122
|
-
get: () => a.modelValue !== void 0 ? a.modelValue :
|
|
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,
|
|
123
122
|
set: (i) => {
|
|
124
|
-
t("update:modelValue", i),
|
|
123
|
+
t("update:modelValue", i), b.value = i;
|
|
125
124
|
}
|
|
126
|
-
}),
|
|
125
|
+
}), y = n(() => {
|
|
127
126
|
const i = ["default-class"];
|
|
128
|
-
return
|
|
129
|
-
}),
|
|
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(() => {
|
|
130
129
|
const i = [];
|
|
131
|
-
return
|
|
132
|
-
}),
|
|
133
|
-
|
|
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();
|
|
134
136
|
};
|
|
135
|
-
return (i,
|
|
136
|
-
class:
|
|
137
|
+
return (i, O) => (o(), p("div", {
|
|
138
|
+
class: A(["phila-input", y.value])
|
|
137
139
|
}, [
|
|
138
|
-
a.label ? (
|
|
140
|
+
a.label ? (o(), p("label", {
|
|
139
141
|
key: 0,
|
|
140
142
|
for: c.value,
|
|
141
143
|
class: "has-text-label-small phila-label"
|
|
142
|
-
}, m(a.label), 9,
|
|
143
|
-
|
|
144
|
-
class:
|
|
145
|
-
onClick:
|
|
144
|
+
}, m(a.label), 9, Y)) : g("", !0),
|
|
145
|
+
k("div", {
|
|
146
|
+
class: A(["phila-text-field", u.value]),
|
|
147
|
+
onClick: P
|
|
146
148
|
}, [
|
|
147
|
-
|
|
148
|
-
a.leadingIcon ? (
|
|
149
|
+
k("div", Z, [
|
|
150
|
+
a.leadingIcon ? (o(), N(l(L), {
|
|
149
151
|
key: 0,
|
|
150
152
|
"icon-class": a.leadingIcon,
|
|
151
153
|
inline: "",
|
|
152
|
-
decorative: ""
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
q(x("input", b({
|
|
154
|
+
decorative: ""
|
|
155
|
+
}, null, 8, ["icon-class"])) : g("", !0),
|
|
156
|
+
k("div", ee, [
|
|
157
|
+
k("div", ae, [
|
|
158
|
+
j(k("input", x({
|
|
158
159
|
id: c.value,
|
|
159
160
|
ref_key: "inputRef",
|
|
160
|
-
ref:
|
|
161
|
-
"onUpdate:modelValue":
|
|
161
|
+
ref: S,
|
|
162
|
+
"onUpdate:modelValue": O[0] || (O[0] = (w) => f.value = w),
|
|
162
163
|
class: "phila-text-field-input has-text-body-default",
|
|
163
|
-
placeholder: a.placeholder
|
|
164
|
-
|
|
165
|
-
|
|
164
|
+
placeholder: a.placeholder,
|
|
165
|
+
"aria-label": z.value
|
|
166
|
+
}, l(s)), null, 16, te), [
|
|
167
|
+
[K, f.value]
|
|
166
168
|
])
|
|
167
169
|
])
|
|
168
170
|
]),
|
|
169
|
-
|
|
171
|
+
f.value != "" ? (o(), N(l(H), {
|
|
170
172
|
key: 1,
|
|
171
173
|
variant: "standard",
|
|
172
174
|
size: "small",
|
|
173
175
|
"icon-only": "",
|
|
174
|
-
"icon-definition": l(
|
|
175
|
-
onClick:
|
|
176
|
-
}, null, 8, ["icon-definition"])) :
|
|
177
|
-
a.trailingIcon ? (
|
|
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), {
|
|
178
180
|
key: 2,
|
|
179
181
|
size: "small",
|
|
180
182
|
"icon-class": a.trailingIcon,
|
|
181
183
|
inline: "",
|
|
182
|
-
decorative: ""
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
k(i.$slots, "trailing-action")
|
|
184
|
+
decorative: ""
|
|
185
|
+
}, null, 8, ["icon-class"])) : g("", !0),
|
|
186
|
+
V(i.$slots, "trailing-action")
|
|
186
187
|
])
|
|
187
188
|
], 2),
|
|
188
|
-
a.supportingText ? (
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
"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),
|
|
192
193
|
size: "small",
|
|
193
194
|
inline: "",
|
|
194
195
|
decorative: ""
|
|
195
196
|
}, null, 8, ["icon-definition"]),
|
|
196
|
-
|
|
197
|
-
])) :
|
|
197
|
+
$(" " + m(r.value), 1)
|
|
198
|
+
])) : g("", !0)
|
|
198
199
|
], 2));
|
|
199
200
|
}
|
|
200
|
-
}),
|
|
201
|
+
}), se = ["disabled"], oe = /* @__PURE__ */ D({
|
|
201
202
|
inheritAttrs: !1,
|
|
202
203
|
__name: "PhlButton",
|
|
203
204
|
props: {
|
|
@@ -218,15 +219,15 @@ const X = ["for"], Y = { class: "state-layer" }, Z = { class: "content" }, ee =
|
|
|
218
219
|
src: {},
|
|
219
220
|
svgRaw: {}
|
|
220
221
|
},
|
|
221
|
-
setup(
|
|
222
|
-
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(
|
|
223
224
|
"phila-button",
|
|
224
225
|
`phila-button--${e.variant}`,
|
|
225
226
|
e.size && `is-${e.size}`,
|
|
226
227
|
e.iconOnly && "icon-button",
|
|
227
228
|
e.iconOnly && e.variant === "standard" && "icon-button--standard",
|
|
228
229
|
e.className
|
|
229
|
-
)),
|
|
230
|
+
)), r = n(() => s(e) ? "to" in e && e.to !== void 0 ? {
|
|
230
231
|
to: e.to,
|
|
231
232
|
disabled: e.disabled,
|
|
232
233
|
className: a.value
|
|
@@ -236,7 +237,7 @@ const X = ["for"], Y = { class: "state-layer" }, Z = { class: "content" }, ee =
|
|
|
236
237
|
rel: e.rel,
|
|
237
238
|
disabled: e.disabled,
|
|
238
239
|
className: a.value
|
|
239
|
-
} : {}), c =
|
|
240
|
+
} : {}), c = n(
|
|
240
241
|
() => ({
|
|
241
242
|
iconDefinition: e.iconDefinition,
|
|
242
243
|
iconClass: e.iconClass,
|
|
@@ -244,39 +245,38 @@ const X = ["for"], Y = { class: "state-layer" }, Z = { class: "content" }, ee =
|
|
|
244
245
|
iconRight: e.iconRight,
|
|
245
246
|
iconOnly: e.iconOnly,
|
|
246
247
|
text: e.text,
|
|
247
|
-
size: e.size
|
|
248
|
-
shadow: e.iconOnly && e.variant === "standard"
|
|
248
|
+
size: e.size
|
|
249
249
|
})
|
|
250
250
|
);
|
|
251
|
-
return (t,
|
|
252
|
-
default:
|
|
253
|
-
|
|
254
|
-
default:
|
|
255
|
-
|
|
256
|
-
|
|
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)
|
|
257
257
|
])
|
|
258
258
|
]),
|
|
259
259
|
_: 3
|
|
260
260
|
}, 16)
|
|
261
261
|
]),
|
|
262
262
|
_: 3
|
|
263
|
-
}, 16)) : (
|
|
263
|
+
}, 16)) : (o(), p("button", x({
|
|
264
264
|
key: 1,
|
|
265
265
|
type: "button",
|
|
266
266
|
disabled: e.disabled,
|
|
267
267
|
class: a.value
|
|
268
268
|
}, t.$attrs), [
|
|
269
|
-
|
|
270
|
-
default:
|
|
271
|
-
|
|
272
|
-
|
|
269
|
+
h(l(R), _(B(c.value)), {
|
|
270
|
+
default: v(() => [
|
|
271
|
+
V(t.$slots, "default", {}, () => [
|
|
272
|
+
$(m(e.text), 1)
|
|
273
273
|
])
|
|
274
274
|
]),
|
|
275
275
|
_: 3
|
|
276
276
|
}, 16)
|
|
277
|
-
], 16,
|
|
277
|
+
], 16, se));
|
|
278
278
|
}
|
|
279
|
-
}), de = /* @__PURE__ */
|
|
279
|
+
}), de = /* @__PURE__ */ D({
|
|
280
280
|
inheritAttrs: !1,
|
|
281
281
|
__name: "Search",
|
|
282
282
|
props: {
|
|
@@ -285,34 +285,35 @@ const X = ["for"], Y = { class: "state-layer" }, Z = { class: "content" }, ee =
|
|
|
285
285
|
className: {}
|
|
286
286
|
},
|
|
287
287
|
emits: ["update:modelValue", "search"],
|
|
288
|
-
setup(
|
|
289
|
-
const
|
|
288
|
+
setup(d, { emit: e }) {
|
|
289
|
+
const s = I(), a = d, r = e, c = n({
|
|
290
290
|
get: () => a.modelValue,
|
|
291
|
-
set: (
|
|
292
|
-
}), t =
|
|
293
|
-
return (
|
|
294
|
-
class: ["search",
|
|
295
|
-
},
|
|
296
|
-
|
|
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
297
|
modelValue: c.value,
|
|
298
|
-
"onUpdate:modelValue":
|
|
298
|
+
"onUpdate:modelValue": u[1] || (u[1] = (z) => c.value = z),
|
|
299
299
|
"class-name": "phila-text-field--search",
|
|
300
|
-
placeholder:
|
|
301
|
-
|
|
300
|
+
placeholder: d.placeholder,
|
|
301
|
+
"aria-label": t.value,
|
|
302
|
+
onKeydown: u[2] || (u[2] = U((z) => r("search"), ["enter"]))
|
|
302
303
|
}, {
|
|
303
|
-
"trailing-action":
|
|
304
|
-
|
|
304
|
+
"trailing-action": v(() => [
|
|
305
|
+
h(l(oe), {
|
|
305
306
|
variant: "standard",
|
|
306
307
|
size: "small",
|
|
307
308
|
"icon-only": "",
|
|
308
309
|
"icon-definition": l(G),
|
|
309
310
|
"aria-label": "Search",
|
|
310
311
|
"class-name": "phila-button--search",
|
|
311
|
-
onClick:
|
|
312
|
+
onClick: u[0] || (u[0] = (z) => r("search"))
|
|
312
313
|
}, null, 8, ["icon-definition"])
|
|
313
314
|
]),
|
|
314
315
|
_: 1
|
|
315
|
-
}, 8, ["modelValue", "placeholder"])
|
|
316
|
+
}, 8, ["modelValue", "placeholder", "aria-label"])
|
|
316
317
|
], 16));
|
|
317
318
|
}
|
|
318
319
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@phila/phila-ui-search",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1-beta.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "a search bar",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
"@fortawesome/pro-solid-svg-icons": "^7.1.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@phila/phila-ui-core": "2.3.0",
|
|
36
|
-
"@phila/phila-ui-text-field": "1.1.
|
|
37
|
-
"@phila/phila-ui-button": "2.2.0"
|
|
35
|
+
"@phila/phila-ui-core": "2.3.1-beta.0",
|
|
36
|
+
"@phila/phila-ui-text-field": "1.1.1-beta.1",
|
|
37
|
+
"@phila/phila-ui-button": "2.2.1-beta.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
40
|
"@types/node": "^24.0.0",
|