@scalar/components 0.24.4 → 0.25.0
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/components/ScalarSidebar/ScalarSidebarPlayground.vue.d.ts +10 -0
- package/dist/components/ScalarSidebar/ScalarSidebarPlayground.vue.d.ts.map +1 -1
- package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.js.map +1 -1
- package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.script.js +2 -3
- package/dist/components/ScalarSidebar/ScalarSidebarSearchInput.vue.script.js.map +1 -1
- package/package.json +2 -2
|
@@ -92,6 +92,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
92
92
|
* @default var(--scalar-border-color)
|
|
93
93
|
*/
|
|
94
94
|
searchBorderColor?: string;
|
|
95
|
+
/**
|
|
96
|
+
* Sets the placeholder for the search input
|
|
97
|
+
* @default 'Search...'
|
|
98
|
+
*/
|
|
99
|
+
searchPlaceholder?: string;
|
|
95
100
|
} & {
|
|
96
101
|
selected?: string;
|
|
97
102
|
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
@@ -182,6 +187,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
|
182
187
|
* @default var(--scalar-border-color)
|
|
183
188
|
*/
|
|
184
189
|
searchBorderColor?: string;
|
|
190
|
+
/**
|
|
191
|
+
* Sets the placeholder for the search input
|
|
192
|
+
* @default 'Search...'
|
|
193
|
+
*/
|
|
194
|
+
searchPlaceholder?: string;
|
|
185
195
|
} & {
|
|
186
196
|
selected?: string;
|
|
187
197
|
}> & Readonly<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarSidebarPlayground.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarPlayground.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarSidebarPlayground.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarPlayground.vue"],"names":[],"mappings":"AAqKA;;;;;GAKG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEhB;;;OAGG;aACM,MAAM;IACf;;;OAGG;cACO,MAAM;IAChB;;;OAGG;YACK,MAAM;IACd;;;OAGG;oBACa,MAAM;IACtB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;0BACmB,MAAM;IAC5B;;;OAGG;qBACc,MAAM;IACvB;;;OAGG;2BACoB,MAAM;IAC7B;;;OAGG;sBACe,MAAM;IACxB;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;yBACkB,MAAM;IAC3B;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;wBACiB,MAAM;;eAQf,MAAM;;;;IAjGjB;;;OAGG;aACM,MAAM;IACf;;;OAGG;cACO,MAAM;IAChB;;;OAGG;YACK,MAAM;IACd;;;OAGG;oBACa,MAAM;IACtB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;eACQ,MAAM;IACjB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;0BACmB,MAAM;IAC5B;;;OAGG;qBACc,MAAM;IACvB;;;OAGG;2BACoB,MAAM;IAC7B;;;OAGG;sBACe,MAAM;IACxB;;;OAGG;mBACY,MAAM;IACrB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;yBACkB,MAAM;IAC3B;;;OAGG;uBACgB,MAAM;IACzB;;;OAGG;kBACW,MAAM;IACpB;;;OAGG;wBACiB,MAAM;IAC1B;;;OAGG;wBACiB,MAAM;;eAQf,MAAM;;;;aAqJN,CAAC,KAAK,IAAgB,KAAK,GAAG;;cAC7B,CAAC,KAAK,IAAiB,KAAK,GAAG;;aAChC,CAAC,KAAK,IAAiB,KAAK,GAAG;EAUxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarSidebarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n autofocus?: boolean\n loader?: LoadingState\n label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n model.value = ''\n // Push focus back to the input\n if (inputRef.value) {\n inputRef.value.focus()\n }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n <label\n v-bind=\"\n stylingAttrsCx(\n 'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n 'bg-sidebar-b-search border-sidebar-border-search',\n model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n <input\n ref=\"inputRef\"\n v-
|
|
1
|
+
{"version":3,"file":"ScalarSidebarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n autofocus?: boolean\n loader?: LoadingState\n label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n model.value = ''\n // Push focus back to the input\n if (inputRef.value) {\n inputRef.value.focus()\n }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n <label\n v-bind=\"\n stylingAttrsCx(\n 'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n 'bg-sidebar-b-search border-sidebar-border-search',\n model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n <input\n ref=\"inputRef\"\n v-model=\"model\"\n :aria-label=\"label ?? 'Enter search query'\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n placeholder=\"Search...\"\n spellcheck=\"false\"\n type=\"search\"\n v-bind=\"otherAttrs\" />\n <ScalarLoading\n v-if=\"loader && loader.isActive\"\n class=\"mr-3 self-center\"\n :loader\n size=\"md\" />\n <ScalarIconButton\n v-else-if=\"model\"\n class=\"p-px size-4\"\n :icon=\"ScalarIconX\"\n label=\"Clear Search\"\n weight=\"bold\"\n @click.stop.prevent=\"handleClear\" />\n </label>\n</template>\n"],"mappings":""}
|
|
@@ -31,8 +31,7 @@ var ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @_
|
|
|
31
31
|
createVNode(unref(ScalarIconMagnifyingGlass), { class: "text-sidebar-c-search size-4" }),
|
|
32
32
|
withDirectives(createElementVNode("input", mergeProps({
|
|
33
33
|
ref_key: "inputRef",
|
|
34
|
-
ref: inputRef
|
|
35
|
-
}, unref(otherAttrs), {
|
|
34
|
+
ref: inputRef,
|
|
36
35
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event),
|
|
37
36
|
"aria-label": __props.label ?? "Enter search query",
|
|
38
37
|
autocapitalize: "off",
|
|
@@ -42,7 +41,7 @@ var ScalarSidebarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @_
|
|
|
42
41
|
placeholder: "Search...",
|
|
43
42
|
spellcheck: "false",
|
|
44
43
|
type: "search"
|
|
45
|
-
}), null, 16, _hoisted_1), [[vModelText, model.value]]),
|
|
44
|
+
}, unref(otherAttrs)), null, 16, _hoisted_1), [[vModelText, model.value]]),
|
|
46
45
|
__props.loader && __props.loader.isActive ? (openBlock(), createBlock(unref(ScalarLoading_default), {
|
|
47
46
|
key: 0,
|
|
48
47
|
class: "mr-3 self-center",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarSidebarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n autofocus?: boolean\n loader?: LoadingState\n label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n model.value = ''\n // Push focus back to the input\n if (inputRef.value) {\n inputRef.value.focus()\n }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n <label\n v-bind=\"\n stylingAttrsCx(\n 'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n 'bg-sidebar-b-search border-sidebar-border-search',\n model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n <input\n ref=\"inputRef\"\n v-
|
|
1
|
+
{"version":3,"file":"ScalarSidebarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Input component\n *\n * An inline search input for the sidebar with a clear button\n * and optional loading indicator.\n *\n * @example\n * <ScalarSidebarSearchInput v-model=\"query\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { onMounted, ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\nconst { autofocus } = defineProps<{\n autofocus?: boolean\n loader?: LoadingState\n label?: string\n}>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\n\nconst model = defineModel<string>()\n\nfunction handleClear() {\n model.value = ''\n // Push focus back to the input\n if (inputRef.value) {\n inputRef.value.focus()\n }\n}\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => autofocus && inputRef.value?.focus())\n</script>\n<template>\n <label\n v-bind=\"\n stylingAttrsCx(\n 'flex items-center rounded border text-base has-[:focus-visible]:bg-sidebar-b-1 has-[:focus-visible]:outline h-8 gap-1 pl-2 pr-1.5',\n 'bg-sidebar-b-search border-sidebar-border-search',\n model ? 'text-sidebar-c-1' : 'text-sidebar-c-search',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n <input\n ref=\"inputRef\"\n v-model=\"model\"\n :aria-label=\"label ?? 'Enter search query'\"\n autocapitalize=\"off\"\n autocomplete=\"off\"\n autocorrect=\"off\"\n class=\"flex-1 appearance-none rounded border-none bg-transparent outline-none\"\n placeholder=\"Search...\"\n spellcheck=\"false\"\n type=\"search\"\n v-bind=\"otherAttrs\" />\n <ScalarLoading\n v-if=\"loader && loader.isActive\"\n class=\"mr-3 self-center\"\n :loader\n size=\"md\" />\n <ScalarIconButton\n v-else-if=\"model\"\n class=\"p-px size-4\"\n :icon=\"ScalarIconX\"\n label=\"Clear Search\"\n weight=\"bold\"\n @click.stop.prevent=\"handleClear\" />\n </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,WAAW,IAA6B,KAAI;EAElD,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,SAAS,cAAc;AACrB,SAAM,QAAQ;AAEd,OAAI,SAAS,MACX,UAAS,MAAM,OAAM;;EAKzB,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB,QAAA,aAAa,SAAS,OAAO,OAAO,CAAA;;uBAGlD,mBAiCQ,SAAA,eAAA,mBAhCS,MAAA,eAAc,CAAA,qIAAA,oDAAmN,MAAA,QAAK,qBAAA,wBAAA,CAAA,CAAA,EAAA;IAOrP,YAAkE,MAAA,0BAAA,EAAA,EAAvC,OAAM,gCAA8B,CAAA;mBAC/D,mBAWwB,SAXxB,WAWwB;cAVlB;KAAJ,KAAI;wEACU,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;OACG,MAAA,WAAU,CAAA,EAAA,MAAA,IAAA,WAAA,EAAA,CAAA,CAAA,YATT,MAAA,MAAK,CAAA,CAAA;IAWR,QAAA,UAAU,QAAA,OAAO,YAAA,WAAA,EADzB,YAIc,MAAA,sBAAA,EAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;+BAEM,MAAA,SAAA,WAAA,EADb,YAMsC,MAAA,yBAAA,EAAA;;KAJpC,OAAM;KACL,MAAM,MAAA,YAAW;KAClB,OAAM;KACN,QAAO;KACN,SAAK,cAAe,aAAW,CAAA,QAAA,UAAA,CAAA"}
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
"url": "git+https://github.com/scalar/scalar.git",
|
|
11
11
|
"directory": "packages/components"
|
|
12
12
|
},
|
|
13
|
-
"version": "0.
|
|
13
|
+
"version": "0.25.0",
|
|
14
14
|
"engines": {
|
|
15
15
|
"node": ">=22"
|
|
16
16
|
},
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"vue-component-type-helpers": "^3.2.6",
|
|
45
45
|
"@scalar/code-highlight": "0.3.4",
|
|
46
46
|
"@scalar/helpers": "0.8.0",
|
|
47
|
-
"@scalar/icons": "0.7.2",
|
|
48
47
|
"@scalar/themes": "0.15.5",
|
|
48
|
+
"@scalar/icons": "0.7.2",
|
|
49
49
|
"@scalar/use-hooks": "0.4.5"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|