@scalar/components 0.27.3 → 0.27.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/components/ScalarCodeBlock/constants.d.ts +1 -0
- package/dist/components/ScalarCodeBlock/constants.d.ts.map +1 -1
- package/dist/components/ScalarCodeBlock/constants.js +1 -0
- package/dist/components/ScalarCodeBlock/constants.js.map +1 -1
- package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.d.ts +4 -0
- package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.d.ts.map +1 -1
- package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.js.map +1 -1
- package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.script.js +7 -5
- package/dist/components/ScalarSearchInput/ScalarSearchInput.vue.script.js.map +1 -1
- package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.d.ts +5 -1
- package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.d.ts.map +1 -1
- package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.js.map +1 -1
- package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.script.js +6 -3
- package/dist/components/ScalarSidebar/ScalarSidebarSearchButton.vue.script.js.map +1 -1
- package/dist/style.css +8 -0
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/constants.ts"],"names":[],"mappings":"AAEA,wCAAwC;AACxC,eAAO,MAAM,eAAe
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarCodeBlock/constants.ts"],"names":[],"mappings":"AAEA,wCAAwC;AACxC,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmD4B,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/constants.ts"],"sourcesContent":["import type { StandardLanguageKey } from './types'\n\n/** Labels for the standard languages */\nexport const LANGUAGE_LABELS = {\n bash: 'Bash',\n c: 'C',\n clojure: 'Clojure',\n cpp: 'C++',\n csharp: 'C#',\n css: 'CSS',\n curl: 'cURL',\n dart: 'Dart',\n diff: 'Diff',\n docker: 'Docker',\n dockerfile: 'Dockerfile',\n elixir: 'Elixir',\n fsharp: 'F#',\n go: 'Go',\n graphql: 'GraphQL',\n haskell: 'Haskell',\n html: 'HTML',\n http: 'HTTP',\n ini: 'INI',\n java: 'Java',\n javascript: 'JavaScript',\n json: 'JSON',\n kotlin: 'Kotlin',\n less: 'Less',\n lua: 'Lua',\n makefile: 'Makefile',\n markdown: 'Markdown',\n matlab: 'MATLAB',\n nginx: 'Nginx',\n objectivec: 'Objective-C',\n ocaml: 'OCaml',\n perl: 'Perl',\n php: 'PHP',\n plaintext: 'Plain Text',\n powershell: 'PowerShell',\n properties: 'Properties',\n python: 'Python',\n r: 'R',\n ruby: 'Ruby',\n rust: 'Rust',\n scala: 'Scala',\n scss: 'SCSS',\n shell: 'Shell',\n sql: 'SQL',\n swift: 'Swift',\n toml: 'TOML',\n typescript: 'TypeScript',\n xml: 'XML',\n yaml: 'YAML',\n} as const satisfies Record<StandardLanguageKey, string>\n"],"mappings":";;AAGA,IAAa,kBAAkB;CAC7B,MAAM;CACN,GAAG;CACH,SAAS;CACT,KAAK;CACL,QAAQ;CACR,KAAK;CACL,MAAM;CACN,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,IAAI;CACJ,SAAS;CACT,SAAS;CACT,MAAM;CACN,MAAM;CACN,KAAK;CACL,MAAM;CACN,YAAY;CACZ,MAAM;CACN,QAAQ;CACR,MAAM;CACN,KAAK;CACL,UAAU;CACV,UAAU;CACV,QAAQ;CACR,OAAO;CACP,YAAY;CACZ,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,GAAG;CACH,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,MAAM;CACN,YAAY;CACZ,KAAK;CACL,MAAM;CACP"}
|
|
1
|
+
{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/ScalarCodeBlock/constants.ts"],"sourcesContent":["import type { StandardLanguageKey } from './types'\n\n/** Labels for the standard languages */\nexport const LANGUAGE_LABELS = {\n bash: 'Bash',\n c: 'C',\n clojure: 'Clojure',\n cpp: 'C++',\n csharp: 'C#',\n css: 'CSS',\n curl: 'cURL',\n dart: 'Dart',\n diff: 'Diff',\n docker: 'Docker',\n dockerfile: 'Dockerfile',\n elixir: 'Elixir',\n fsharp: 'F#',\n go: 'Go',\n graphql: 'GraphQL',\n haskell: 'Haskell',\n html: 'HTML',\n http: 'HTTP',\n ini: 'INI',\n java: 'Java',\n javascript: 'JavaScript',\n json: 'JSON',\n kotlin: 'Kotlin',\n less: 'Less',\n lua: 'Lua',\n makefile: 'Makefile',\n markdown: 'Markdown',\n matlab: 'MATLAB',\n mojo: 'Mojo',\n nginx: 'Nginx',\n objectivec: 'Objective-C',\n ocaml: 'OCaml',\n perl: 'Perl',\n php: 'PHP',\n plaintext: 'Plain Text',\n powershell: 'PowerShell',\n properties: 'Properties',\n python: 'Python',\n r: 'R',\n ruby: 'Ruby',\n rust: 'Rust',\n scala: 'Scala',\n scss: 'SCSS',\n shell: 'Shell',\n sql: 'SQL',\n swift: 'Swift',\n toml: 'TOML',\n typescript: 'TypeScript',\n xml: 'XML',\n yaml: 'YAML',\n} as const satisfies Record<StandardLanguageKey, string>\n"],"mappings":";;AAGA,IAAa,kBAAkB;CAC7B,MAAM;CACN,GAAG;CACH,SAAS;CACT,KAAK;CACL,QAAQ;CACR,KAAK;CACL,MAAM;CACN,MAAM;CACN,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,IAAI;CACJ,SAAS;CACT,SAAS;CACT,MAAM;CACN,MAAM;CACN,KAAK;CACL,MAAM;CACN,YAAY;CACZ,MAAM;CACN,QAAQ;CACR,MAAM;CACN,KAAK;CACL,UAAU;CACV,UAAU;CACV,QAAQ;CACR,MAAM;CACN,OAAO;CACP,YAAY;CACZ,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,YAAY;CACZ,YAAY;CACZ,QAAQ;CACR,GAAG;CACH,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;CACL,OAAO;CACP,MAAM;CACN,YAAY;CACZ,KAAK;CACL,MAAM;CACP"}
|
|
@@ -16,6 +16,8 @@ export default _default;
|
|
|
16
16
|
declare const __VLS_export: import("vue").DefineComponent<{
|
|
17
17
|
loader?: LoadingState;
|
|
18
18
|
label?: string;
|
|
19
|
+
placeholder?: string;
|
|
20
|
+
clearLabel?: string;
|
|
19
21
|
} & {
|
|
20
22
|
modelValue?: string;
|
|
21
23
|
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
@@ -23,6 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<{
|
|
|
23
25
|
}, string, import("vue").PublicProps, Readonly<{
|
|
24
26
|
loader?: LoadingState;
|
|
25
27
|
label?: string;
|
|
28
|
+
placeholder?: string;
|
|
29
|
+
clearLabel?: string;
|
|
26
30
|
} & {
|
|
27
31
|
modelValue?: string;
|
|
28
32
|
}> & Readonly<{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarSearchInput.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"names":[],"mappings":"AAwFA,OAAO,EAAE,KAAK,YAAY,EAAiB,MAAM,kBAAkB,CAAA;AAGnE;;;;;;;;;;;GAWG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;aAEP,YAAY;YACb,MAAM;kBACA,MAAM;iBACP,MAAM;;iBAqBR,MAAM;;;;aAxBR,YAAY;YACb,MAAM;kBACA,MAAM;iBACP,MAAM;;iBAqBR,MAAM;;;kFA6Hf,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\ndefineProps<{\n loader?: LoadingState\n label?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\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</script>\n<template>\n <label\n v-bind=\"\n stylingAttrsCx(\n 'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n <input\n ref=\"inputRef\"\n v-bind=\"otherAttrs\"\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
|
|
1
|
+
{"version":3,"file":"ScalarSearchInput.vue.js","names":[],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\ndefineProps<{\n loader?: LoadingState\n label?: string\n placeholder?: string\n clearLabel?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\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</script>\n<template>\n <label\n v-bind=\"\n stylingAttrsCx(\n 'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n <input\n ref=\"inputRef\"\n v-bind=\"otherAttrs\"\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=\"placeholder ?? 'Search...'\"\n spellcheck=\"false\"\n type=\"search\" />\n <ScalarLoading\n v-if=\"loader && loader.isActive\"\n class=\"mr-1\"\n :loader\n size=\"lg\" />\n <ScalarIconButton\n v-else-if=\"model\"\n class=\"-my-1\"\n :icon=\"ScalarIconX\"\n :label=\"clearLabel ?? 'Clear Search'\"\n size=\"sm\"\n weight=\"bold\"\n @click.stop.prevent=\"handleClear\" />\n </label>\n</template>\n"],"mappings":""}
|
|
@@ -4,13 +4,15 @@ import { useBindCx } from "@scalar/use-hooks/useBindCx";
|
|
|
4
4
|
import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, openBlock, ref, unref, useModel, vModelText, withDirectives, withModifiers } from "vue";
|
|
5
5
|
import { ScalarIconMagnifyingGlass, ScalarIconX } from "@scalar/icons";
|
|
6
6
|
//#region src/components/ScalarSearchInput/ScalarSearchInput.vue?vue&type=script&setup=true&lang.ts
|
|
7
|
-
var _hoisted_1 = ["aria-label"];
|
|
7
|
+
var _hoisted_1 = ["aria-label", "placeholder"];
|
|
8
8
|
var ScalarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
9
9
|
inheritAttrs: false,
|
|
10
10
|
__name: "ScalarSearchInput",
|
|
11
11
|
props: /* @__PURE__ */ mergeModels({
|
|
12
12
|
loader: {},
|
|
13
|
-
label: {}
|
|
13
|
+
label: {},
|
|
14
|
+
placeholder: {},
|
|
15
|
+
clearLabel: {}
|
|
14
16
|
}, {
|
|
15
17
|
"modelValue": {},
|
|
16
18
|
"modelModifiers": {}
|
|
@@ -37,7 +39,7 @@ var ScalarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
|
|
|
37
39
|
autocomplete: "off",
|
|
38
40
|
autocorrect: "off",
|
|
39
41
|
class: "flex-1 appearance-none rounded border-none bg-transparent outline-none",
|
|
40
|
-
placeholder: "Search...",
|
|
42
|
+
placeholder: __props.placeholder ?? "Search...",
|
|
41
43
|
spellcheck: "false",
|
|
42
44
|
type: "search"
|
|
43
45
|
}), null, 16, _hoisted_1), [[vModelText, model.value]]),
|
|
@@ -50,11 +52,11 @@ var ScalarSearchInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
|
|
|
50
52
|
key: 1,
|
|
51
53
|
class: "-my-1",
|
|
52
54
|
icon: unref(ScalarIconX),
|
|
53
|
-
label: "Clear Search",
|
|
55
|
+
label: __props.clearLabel ?? "Clear Search",
|
|
54
56
|
size: "sm",
|
|
55
57
|
weight: "bold",
|
|
56
58
|
onClick: withModifiers(handleClear, ["stop", "prevent"])
|
|
57
|
-
}, null, 8, ["icon"])) : createCommentVNode("", true)
|
|
59
|
+
}, null, 8, ["icon", "label"])) : createCommentVNode("", true)
|
|
58
60
|
], 16);
|
|
59
61
|
};
|
|
60
62
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\ndefineProps<{\n loader?: LoadingState\n label?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\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</script>\n<template>\n <label\n v-bind=\"\n stylingAttrsCx(\n 'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n <input\n ref=\"inputRef\"\n v-bind=\"otherAttrs\"\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
|
|
1
|
+
{"version":3,"file":"ScalarSearchInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarSearchInput/ScalarSearchInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar search input component\n *\n * Provides an large input field with a loading state and a clear button,\n * intended to be used with the ScalarSearchResults component.\n *\n * If you want a smaller input field for use in a sidebar, use\n * the ScalarSidebarSearchInput component instead.\n *\n * @example\n * <ScalarSearchInput v-model=\"search\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass, ScalarIconX } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { ref } from 'vue'\n\nimport { ScalarIconButton } from '../ScalarIconButton'\nimport { type LoadingState, ScalarLoading } from '../ScalarLoading'\n\ndefineProps<{\n loader?: LoadingState\n label?: string\n placeholder?: string\n clearLabel?: string\n}>()\n\nconst model = defineModel<string>()\n\nconst inputRef = ref<HTMLInputElement | null>(null)\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</script>\n<template>\n <label\n v-bind=\"\n stylingAttrsCx(\n 'flex items-center text-lg font-medium h-10 pl-3 pr-1.5 py-2 gap-2.25',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"text-sidebar-c-search size-4\" />\n <input\n ref=\"inputRef\"\n v-bind=\"otherAttrs\"\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=\"placeholder ?? 'Search...'\"\n spellcheck=\"false\"\n type=\"search\" />\n <ScalarLoading\n v-if=\"loader && loader.isActive\"\n class=\"mr-1\"\n :loader\n size=\"lg\" />\n <ScalarIconButton\n v-else-if=\"model\"\n class=\"-my-1\"\n :icon=\"ScalarIconX\"\n :label=\"clearLabel ?? 'Clear Search'\"\n size=\"sm\"\n weight=\"bold\"\n @click.stop.prevent=\"handleClear\" />\n </label>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;EA8BA,MAAM,QAAQ,SAAmB,SAAA,aAAC;EAElC,MAAM,WAAW,IAA6B,KAAI;EAElD,SAAS,cAAc;AACrB,SAAM,QAAQ;AAEd,OAAI,SAAS,MACX,UAAS,MAAM,OAAM;;EAKzB,MAAM,EAAE,gBAAgB,eAAe,WAAU;;uBAG/C,mBAgCQ,SAAA,eAAA,mBA/BS,MAAA,eAAc,CAAA,uEAAA,CAAA,CAAA,EAAA;IAK7B,YAAkE,MAAA,0BAAA,EAAA,EAAvC,OAAM,gCAA8B,CAAA;mBAC/D,mBAWkB,SAXlB,WAWkB;cAVZ;KAAJ,KAAI;OACI,MAAA,WAAU,EAAA;wEACJ,QAAA;KACb,cAAY,QAAA,SAAK;KAClB,gBAAe;KACf,cAAa;KACb,aAAY;KACZ,OAAM;KACL,aAAa,QAAA,eAAW;KACzB,YAAW;KACX,MAAK;6CARI,MAAA,MAAK,CAAA,CAAA;IAUR,QAAA,UAAU,QAAA,OAAO,YAAA,WAAA,EADzB,YAIc,MAAA,sBAAA,EAAA;;KAFZ,OAAM;KACL,QAAA,QAAA;KACD,MAAK;+BAEM,MAAA,SAAA,WAAA,EADb,YAOsC,MAAA,yBAAA,EAAA;;KALpC,OAAM;KACL,MAAM,MAAA,YAAW;KACjB,OAAO,QAAA,cAAU;KAClB,MAAK;KACL,QAAO;KACN,SAAK,cAAe,aAAW,CAAA,QAAA,UAAA,CAAA"}
|
|
@@ -11,7 +11,11 @@
|
|
|
11
11
|
*/
|
|
12
12
|
declare const _default: typeof __VLS_export;
|
|
13
13
|
export default _default;
|
|
14
|
-
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
14
|
+
declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
|
|
15
|
+
shortcutLabel?: string;
|
|
16
|
+
}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
|
|
17
|
+
shortcutLabel?: string;
|
|
18
|
+
}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
|
|
15
19
|
default?: (props: {}) => any;
|
|
16
20
|
} & {
|
|
17
21
|
shortcut?: (props: {}) => any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarSidebarSearchButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ScalarSidebarSearchButton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"names":[],"mappings":"AAwDA;;;;;;;;;;GAUG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;oBAEA,MAAM;;oBAAN,MAAM;;cAkFV,CAAC,KAAK,IAAgB,KAAK,GAAG;;eAC7B,CAAC,KAAK,IAAgB,KAAK,GAAG;EASzC,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":"ScalarSidebarSearchButton.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n * <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <button\n role=\"search\"\n type=\"button\"\n v-bind=\"\n cx(\n 'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n 'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"size-4\" />\n <span class=\"flex-1 text-
|
|
1
|
+
{"version":3,"file":"ScalarSidebarSearchButton.vue.js","names":[],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n * <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { shortcutLabel = 'Keyboard Shortcut:' } = defineProps<{\n shortcutLabel?: string\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <button\n role=\"search\"\n type=\"button\"\n v-bind=\"\n cx(\n 'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n 'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"size-4\" />\n <span class=\"flex-1 text-start leading-none\">\n <slot>Search...</slot>\n </span>\n <span\n v-if=\"$slots.shortcut\"\n class=\"uppercase text-sidebar-c-2 leading-none py-1 px-1.25 rounded text-xs font-medium border\">\n <span class=\"sr-only\">{{ shortcutLabel }}</span>\n <kbd dir=\"ltr\">\n <slot name=\"shortcut\" />\n </kbd>\n </span>\n </button>\n</template>\n"],"mappings":""}
|
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
import { useBindCx } from "@scalar/use-hooks/useBindCx";
|
|
2
|
-
import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, unref } from "vue";
|
|
2
|
+
import { createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeProps, openBlock, renderSlot, toDisplayString, unref } from "vue";
|
|
3
3
|
import { ScalarIconMagnifyingGlass } from "@scalar/icons";
|
|
4
4
|
//#region src/components/ScalarSidebar/ScalarSidebarSearchButton.vue?vue&type=script&setup=true&lang.ts
|
|
5
|
-
var _hoisted_1 = { class: "flex-1 text-
|
|
5
|
+
var _hoisted_1 = { class: "flex-1 text-start leading-none" };
|
|
6
6
|
var _hoisted_2 = {
|
|
7
7
|
key: 0,
|
|
8
8
|
class: "uppercase text-sidebar-c-2 leading-none py-1 px-1.25 rounded text-xs font-medium border"
|
|
9
9
|
};
|
|
10
|
+
var _hoisted_3 = { class: "sr-only" };
|
|
11
|
+
var _hoisted_4 = { dir: "ltr" };
|
|
10
12
|
var ScalarSidebarSearchButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
|
|
11
13
|
inheritAttrs: false,
|
|
12
14
|
__name: "ScalarSidebarSearchButton",
|
|
15
|
+
props: { shortcutLabel: { default: "Keyboard Shortcut:" } },
|
|
13
16
|
setup(__props) {
|
|
14
17
|
const { cx } = useBindCx();
|
|
15
18
|
return (_ctx, _cache) => {
|
|
@@ -19,7 +22,7 @@ var ScalarSidebarSearchButton_vue_vue_type_script_setup_true_lang_default = /* @
|
|
|
19
22
|
}, unref(cx)("flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1", "bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search")), [
|
|
20
23
|
createVNode(unref(ScalarIconMagnifyingGlass), { class: "size-4" }),
|
|
21
24
|
createElementVNode("span", _hoisted_1, [renderSlot(_ctx.$slots, "default", {}, () => [_cache[0] || (_cache[0] = createTextVNode("Search...", -1))])]),
|
|
22
|
-
_ctx.$slots.shortcut ? (openBlock(), createElementBlock("span", _hoisted_2, [
|
|
25
|
+
_ctx.$slots.shortcut ? (openBlock(), createElementBlock("span", _hoisted_2, [createElementVNode("span", _hoisted_3, toDisplayString(__props.shortcutLabel), 1), createElementVNode("kbd", _hoisted_4, [renderSlot(_ctx.$slots, "shortcut")])])) : createCommentVNode("", true)
|
|
23
26
|
], 16);
|
|
24
27
|
};
|
|
25
28
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarSidebarSearchButton.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n * <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <button\n role=\"search\"\n type=\"button\"\n v-bind=\"\n cx(\n 'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n 'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"size-4\" />\n <span class=\"flex-1 text-
|
|
1
|
+
{"version":3,"file":"ScalarSidebarSearchButton.vue.script.js","names":["$slots"],"sources":["../../../src/components/ScalarSidebar/ScalarSidebarSearchButton.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Sidebar Search Button component\n *\n * A styled button that serves as a search trigger in the sidebar.\n * Displays a magnifying glass icon and an optional keyboard shortcut.\n *\n * @example\n * <ScalarSidebarSearchButton>\n * <template #shortcut>⌘K</template>\n * </ScalarSidebarSearchButton>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { ScalarIconMagnifyingGlass } from '@scalar/icons'\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nconst { shortcutLabel = 'Keyboard Shortcut:' } = defineProps<{\n shortcutLabel?: string\n}>()\n\ndefineOptions({ inheritAttrs: false })\nconst { cx } = useBindCx()\n</script>\n<template>\n <button\n role=\"search\"\n type=\"button\"\n v-bind=\"\n cx(\n 'flex items-center rounded border text-base h-8 gap-1 pl-2 pr-1',\n 'bg-sidebar-b-search border-sidebar-border-search text-sidebar-c-search',\n )\n \">\n <ScalarIconMagnifyingGlass class=\"size-4\" />\n <span class=\"flex-1 text-start leading-none\">\n <slot>Search...</slot>\n </span>\n <span\n v-if=\"$slots.shortcut\"\n class=\"uppercase text-sidebar-c-2 leading-none py-1 px-1.25 rounded text-xs font-medium border\">\n <span class=\"sr-only\">{{ shortcutLabel }}</span>\n <kbd dir=\"ltr\">\n <slot name=\"shortcut\" />\n </kbd>\n </span>\n </button>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAuBA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAqBS,UArBT,WAqBS;IApBP,MAAK;IACL,MAAK;MACU,MAAA,GAAE,CAAA,kEAAA,yEAAA,CAAA,EAAA;IAMjB,YAA4C,MAAA,0BAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA;IACzC,mBAEO,QAFP,YAEO,CADL,WAAsB,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,OAAA,OAAA,OAAA,KAAA,gBAAhB,aAAS,GAAA,EAAA,CAAA,CAAA,CAAA;IAGTA,KAAAA,OAAO,YAAA,WAAA,EADf,mBAOO,QAPP,YAOO,CAJL,mBAAgD,QAAhD,YAAgD,gBAAvB,QAAA,cAAa,EAAA,EAAA,EACtC,mBAEM,OAFN,YAEM,CADJ,WAAwB,KAAA,QAAA,WAAA,CAAA,CAAA,CAAA,CAAA,IAAA,mBAAA,IAAA,KAAA"}
|
package/dist/style.css
CHANGED
|
@@ -440,6 +440,10 @@
|
|
|
440
440
|
border-width: 1px;
|
|
441
441
|
}
|
|
442
442
|
|
|
443
|
+
:where(.scalar-app) input, :where(.scalar-app) select, :where(.scalar-app) textarea {
|
|
444
|
+
text-align: start;
|
|
445
|
+
}
|
|
446
|
+
|
|
443
447
|
:where(.scalar-app) input::placeholder, :where(.scalar-app) text-area::placeholder {
|
|
444
448
|
color: var(--scalar-color-3);
|
|
445
449
|
font-family: var(--scalar-font);
|
|
@@ -2184,6 +2188,10 @@
|
|
|
2184
2188
|
text-align: left;
|
|
2185
2189
|
}
|
|
2186
2190
|
|
|
2191
|
+
.scalar-app .text-start {
|
|
2192
|
+
text-align: start;
|
|
2193
|
+
}
|
|
2194
|
+
|
|
2187
2195
|
.scalar-app .font-code {
|
|
2188
2196
|
font-family: var(--scalar-font-code);
|
|
2189
2197
|
}
|
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.27.
|
|
13
|
+
"version": "0.27.4",
|
|
14
14
|
"engines": {
|
|
15
15
|
"node": ">=22"
|
|
16
16
|
},
|
|
@@ -221,11 +221,11 @@
|
|
|
221
221
|
"radix-vue": "^1.9.17",
|
|
222
222
|
"vue": "^3.5.30",
|
|
223
223
|
"vue-component-type-helpers": "^3.2.6",
|
|
224
|
-
"@scalar/
|
|
225
|
-
"@scalar/
|
|
224
|
+
"@scalar/code-highlight": "0.4.0",
|
|
225
|
+
"@scalar/helpers": "0.9.0",
|
|
226
226
|
"@scalar/icons": "0.7.3",
|
|
227
|
-
"@scalar/
|
|
228
|
-
"@scalar/
|
|
227
|
+
"@scalar/use-hooks": "0.4.7",
|
|
228
|
+
"@scalar/themes": "0.16.2"
|
|
229
229
|
},
|
|
230
230
|
"devDependencies": {
|
|
231
231
|
"@playwright/test": "1.59.1",
|