@scalar/components 0.27.2 → 0.27.3
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarTextArea.vue.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n * <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n input: model,\n styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n // Force autofocus if the textarea has the autofocus attribute\n if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n <ScalarFormInput\n is=\"div\"\n v-bind=\"\n stylingAttrsCx(\n 'custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug',\n )\n \"\n @click=\"textarea?.focus()\">\n <textarea\n ref=\"textarea\"\n v-model=\"model\"\n v-bind=\"otherAttrs\"\n class=\"w-full resize-none border-none bg-transparent
|
|
1
|
+
{"version":3,"file":"ScalarTextArea.vue.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n * <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n input: model,\n styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n // Force autofocus if the textarea has the autofocus attribute\n if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n <ScalarFormInput\n is=\"div\"\n v-bind=\"\n stylingAttrsCx(\n 'custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug focus-within:bg-b-1',\n )\n \"\n @click=\"textarea?.focus()\">\n <textarea\n ref=\"textarea\"\n v-model=\"model\"\n v-bind=\"otherAttrs\"\n class=\"w-full resize-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\" />\n </ScalarFormInput>\n</template>\n"],"mappings":""}
|
|
@@ -21,12 +21,12 @@ var ScalarTextArea_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
|
|
|
21
21
|
if ("autofocus" in otherAttrs.value) textarea.value?.focus();
|
|
22
22
|
});
|
|
23
23
|
return (_ctx, _cache) => {
|
|
24
|
-
return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug"), { onClick: _cache[1] || (_cache[1] = ($event) => unref(textarea)?.focus()) }), {
|
|
24
|
+
return openBlock(), createBlock(unref(ScalarFormInput_default), mergeProps({ is: "div" }, unref(stylingAttrsCx)("custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug focus-within:bg-b-1"), { onClick: _cache[1] || (_cache[1] = ($event) => unref(textarea)?.focus()) }), {
|
|
25
25
|
default: withCtx(() => [withDirectives(createElementVNode("textarea", mergeProps({
|
|
26
26
|
ref_key: "textarea",
|
|
27
27
|
ref: textarea,
|
|
28
28
|
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => model.value = $event)
|
|
29
|
-
}, unref(otherAttrs), { class: "w-full resize-none border-none bg-transparent
|
|
29
|
+
}, unref(otherAttrs), { class: "w-full resize-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none" }), null, 16), [[vModelText, model.value]])]),
|
|
30
30
|
_: 1
|
|
31
31
|
}, 16);
|
|
32
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScalarTextArea.vue.script.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n * <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n input: model,\n styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n // Force autofocus if the textarea has the autofocus attribute\n if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n <ScalarFormInput\n is=\"div\"\n v-bind=\"\n stylingAttrsCx(\n 'custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug',\n )\n \"\n @click=\"textarea?.focus()\">\n <textarea\n ref=\"textarea\"\n v-model=\"model\"\n v-bind=\"otherAttrs\"\n class=\"w-full resize-none border-none bg-transparent
|
|
1
|
+
{"version":3,"file":"ScalarTextArea.vue.script.js","names":[],"sources":["../../../src/components/ScalarTextArea/ScalarTextArea.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Text Area component\n *\n * A wrapper around the HTML textarea element with a focusable container.\n *\n * @example\n * <ScalarTextArea v-model=\"model\" />\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\nimport { useTextareaAutosize } from '@vueuse/core'\nimport { onMounted } from 'vue'\n\nimport { ScalarFormInput } from '../ScalarForm'\n\nconst model = defineModel<string>({ default: '' })\n\nconst { textarea } = useTextareaAutosize({\n input: model,\n styleProp: 'minHeight',\n})\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n\nonMounted(() => {\n // Force autofocus if the textarea has the autofocus attribute\n if ('autofocus' in otherAttrs.value) textarea.value?.focus()\n})\n</script>\n<template>\n <ScalarFormInput\n is=\"div\"\n v-bind=\"\n stylingAttrsCx(\n 'custom-scroll flex items-start text-c-1 min-h-0 shrink cursor-text leading-snug focus-within:bg-b-1',\n )\n \"\n @click=\"textarea?.focus()\">\n <textarea\n ref=\"textarea\"\n v-model=\"model\"\n v-bind=\"otherAttrs\"\n class=\"w-full resize-none border-none bg-transparent placeholder:font-[inherit] focus-within:outline-none\" />\n </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;EAkBA,MAAM,QAAQ,SAAmB,SAAA,aAAgB;EAEjD,MAAM,EAAE,aAAa,oBAAoB;GACvC,OAAO;GACP,WAAW;GACZ,CAAA;EAGD,MAAM,EAAE,gBAAgB,eAAe,WAAU;AAEjD,kBAAgB;AAEd,OAAI,eAAe,WAAW,MAAO,UAAS,OAAO,OAAM;IAC5D;;uBAGC,YAakB,MAAA,wBAAA,EAblB,WAakB,EAZhB,IAAG,OAAK,EACO,MAAA,eAAc,CAAA,sGAAA,EAAA,EAK5B,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,MAAA,SAAQ,EAAE,OAAK,GAAA,CAAA,EAAA;2BAKwF,CAAA,eAJ/G,mBAI+G,YAJ/G,WAI+G;cAHzG;KAAJ,KAAI;wEACU,QAAA;OACN,MAAA,WAAU,EAAA,EAClB,OAAM,sGAAoG,CAAA,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA,YAFjG,MAAA,MAAK,CAAA,CAAA,CAAA,CAAA"}
|
package/dist/style.css
CHANGED
|
@@ -440,7 +440,12 @@
|
|
|
440
440
|
border-width: 1px;
|
|
441
441
|
}
|
|
442
442
|
|
|
443
|
-
:where(.scalar-app) input::placeholder {
|
|
443
|
+
:where(.scalar-app) input::placeholder, :where(.scalar-app) text-area::placeholder {
|
|
444
|
+
color: var(--scalar-color-3);
|
|
445
|
+
font-family: var(--scalar-font);
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
:where(.scalar-app) ::-webkit-input-placeholder {
|
|
444
449
|
color: var(--scalar-color-3);
|
|
445
450
|
font-family: var(--scalar-font);
|
|
446
451
|
}
|
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.3",
|
|
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/code-highlight": "0.3.6",
|
|
225
224
|
"@scalar/helpers": "0.8.2",
|
|
226
|
-
"@scalar/
|
|
225
|
+
"@scalar/code-highlight": "0.3.6",
|
|
227
226
|
"@scalar/icons": "0.7.3",
|
|
228
|
-
"@scalar/themes": "0.16.
|
|
227
|
+
"@scalar/themes": "0.16.1",
|
|
228
|
+
"@scalar/use-hooks": "0.4.7"
|
|
229
229
|
},
|
|
230
230
|
"devDependencies": {
|
|
231
231
|
"@playwright/test": "1.59.1",
|