@qti-components/choice-interaction 1.1.6-next.1 → 1.2.0-next.2
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/qti-choice-interaction.styles.js +3 -1
- package/dist/qti-choice-interaction.styles.js.map +1 -1
- package/dist/stories/qti-choice-interaction.fixtures.d.ts +4 -0
- package/dist/stories/qti-choice-interaction.fixtures.js +36 -0
- package/dist/stories/qti-choice-interaction.fixtures.js.map +1 -0
- package/package.json +3 -3
|
@@ -8,9 +8,11 @@ export default [
|
|
|
8
8
|
display: block;
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
+
/* No gap of its own: a choice carries its own padding, which already spaces a list. A theme sets
|
|
12
|
+
--qti-choice-gap where the choices are drawn as separate boxes and need air between them. */
|
|
11
13
|
[part='slot'] {
|
|
12
14
|
display: grid;
|
|
13
|
-
gap:
|
|
15
|
+
gap: var(--qti-choice-gap, 0);
|
|
14
16
|
}
|
|
15
17
|
|
|
16
18
|
/* Define the number of columns dynamically */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"qti-choice-interaction.styles.js","sourceRoot":"","sources":["../src/qti-choice-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,eAAe;IACb,SAAS;IACT,iBAAiB;IACjB,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"qti-choice-interaction.styles.js","sourceRoot":"","sources":["../src/qti-choice-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,eAAe;IACb,SAAS;IACT,iBAAiB;IACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport { boxSizing, validationMessage } from '@qti-components/base';\n\nexport default [\n boxSizing,\n validationMessage,\n css`\n :host {\n display: block;\n }\n\n /* No gap of its own: a choice carries its own padding, which already spaces a list. A theme sets\n --qti-choice-gap where the choices are drawn as separate boxes and need air between them. */\n [part='slot'] {\n display: grid;\n gap: var(--qti-choice-gap, 0);\n }\n\n /* Define the number of columns dynamically */\n :host([class*='qti-choices-stacking-']) [part='slot'] {\n grid-template-columns: repeat(var(--stacking-count, 1), 1fr);\n }\n\n /* Apply dynamic stacking count based on class */\n :host(.qti-choices-stacking-1) {\n --stacking-count: 1;\n }\n :host(.qti-choices-stacking-2) {\n --stacking-count: 2;\n }\n :host(.qti-choices-stacking-3) {\n --stacking-count: 3;\n }\n :host(.qti-choices-stacking-4) {\n --stacking-count: 4;\n }\n :host(.qti-choices-stacking-5) {\n --stacking-count: 5;\n }\n\n /* Default slot item layout */\n ::slotted(qti-simple-choice) {\n display: flex;\n align-items: center;\n white-space: normal;\n }\n\n /* Orientation styles */\n :host(.qti-orientation-horizontal) [part='slot'] {\n grid-auto-flow: dense column;\n grid-auto-columns: 1fr;\n }\n\n :host(.qti-orientation-vertical) [part='slot'] {\n grid-auto-flow: row;\n }\n\n /* Vertical and horizontal stacking logic */\n :host(.qti-orientation-vertical[class*='qti-choices-stacking-']) [part='slot'] {\n grid-auto-flow: dense column;\n grid-auto-columns: 1fr;\n grid-template-columns: repeat(var(--stacking-count), 1fr);\n grid-template-rows: repeat(calc(var(--item-count) / var(--stacking-count)), 1fr);\n }\n\n :host(.qti-orientation-horizontal[class*='qti-choices-stacking-']) [part='slot'] {\n grid-auto-flow: row;\n grid-template-columns: repeat(var(--stacking-count), 1fr);\n grid-template-rows: unset;\n }\n\n /* Ensure even distribution in vertical mode */\n :host(.qti-orientation-vertical) ::slotted(qti-simple-choice:nth-child(even)) {\n grid-row: auto;\n }\n `\n];\n"]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
/** Four options under a prompt: the fixture most choice stories render. */
|
|
2
|
+
export declare const optionsRender: (args: object, _context?: unknown) => import("lit").TemplateResult<1>;
|
|
3
|
+
/** The same, in a 300px container, with one option long enough to wrap. */
|
|
4
|
+
export declare const textOverflowRender: (args: any) => import("lit").TemplateResult<1>;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import { spreadArgs } from '@qti-components/utilities';
|
|
3
|
+
/** Four options under a prompt: the fixture most choice stories render. */
|
|
4
|
+
export const optionsRender = (args, _context) => {
|
|
5
|
+
return html ` <qti-choice-interaction ${spreadArgs(args)} data-testid="interaction">
|
|
6
|
+
<qti-prompt>
|
|
7
|
+
<p>Which of the following features are <strong>new</strong> to QTI 3?</p>
|
|
8
|
+
</qti-prompt>
|
|
9
|
+
<qti-simple-choice identifier="A">Option A</qti-simple-choice>
|
|
10
|
+
<qti-simple-choice identifier="B">Option B</qti-simple-choice>
|
|
11
|
+
<qti-simple-choice identifier="C">Option C</qti-simple-choice>
|
|
12
|
+
<qti-simple-choice identifier="D">Option D</qti-simple-choice>
|
|
13
|
+
</qti-choice-interaction>`;
|
|
14
|
+
};
|
|
15
|
+
/** The same, in a 300px container, with one option long enough to wrap. */
|
|
16
|
+
export const textOverflowRender = args => {
|
|
17
|
+
// Create a wrapper with fixed width to test text wrapping
|
|
18
|
+
return html `
|
|
19
|
+
<div style="width: 300px; border: 1px solid #ccc;">
|
|
20
|
+
<qti-choice-interaction ${spreadArgs(args)} data-testid="interaction">
|
|
21
|
+
<qti-prompt>
|
|
22
|
+
<p>Which of the following features are <strong>new</strong> to QTI 3?</p>
|
|
23
|
+
</qti-prompt>
|
|
24
|
+
<qti-simple-choice identifier="A">Option A</qti-simple-choice>
|
|
25
|
+
<qti-simple-choice identifier="B">Option B</qti-simple-choice>
|
|
26
|
+
<qti-simple-choice identifier="C">Option C</qti-simple-choice>
|
|
27
|
+
<qti-simple-choice identifier="D"
|
|
28
|
+
>This is a very long option text that should wrap to the next line instead of overflowing outside its
|
|
29
|
+
container when rendered properly. The text should respect the container boundaries and not break the
|
|
30
|
+
layout.</qti-simple-choice
|
|
31
|
+
>
|
|
32
|
+
</qti-choice-interaction>
|
|
33
|
+
</div>
|
|
34
|
+
`;
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=qti-choice-interaction.fixtures.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"qti-choice-interaction.fixtures.js","sourceRoot":"","sources":["../../src/stories/qti-choice-interaction.fixtures.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,2EAA2E;AAC3E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAY,EAAE,QAAkB,EAAE,EAAE;IAChE,OAAO,IAAI,CAAA,4BAA4B,UAAU,CAAC,IAA+B,CAAC;;;;;;;;4BAQxD,CAAC;AAC7B,CAAC,CAAC;AAEF,2EAA2E;AAC3E,MAAM,CAAC,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE;IACvC,0DAA0D;IAC1D,OAAO,IAAI,CAAA;;gCAEmB,UAAU,CAAC,IAA+B,CAAC;;;;;;;;;;;;;;GAcxE,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { html } from 'lit';\n\nimport { spreadArgs } from '@qti-components/utilities';\n\n/** Four options under a prompt: the fixture most choice stories render. */\nexport const optionsRender = (args: object, _context?: unknown) => {\n return html` <qti-choice-interaction ${spreadArgs(args as Record<string, unknown>)} data-testid=\"interaction\">\n <qti-prompt>\n <p>Which of the following features are <strong>new</strong> to QTI 3?</p>\n </qti-prompt>\n <qti-simple-choice identifier=\"A\">Option A</qti-simple-choice>\n <qti-simple-choice identifier=\"B\">Option B</qti-simple-choice>\n <qti-simple-choice identifier=\"C\">Option C</qti-simple-choice>\n <qti-simple-choice identifier=\"D\">Option D</qti-simple-choice>\n </qti-choice-interaction>`;\n};\n\n/** The same, in a 300px container, with one option long enough to wrap. */\nexport const textOverflowRender = args => {\n // Create a wrapper with fixed width to test text wrapping\n return html`\n <div style=\"width: 300px; border: 1px solid #ccc;\">\n <qti-choice-interaction ${spreadArgs(args as Record<string, unknown>)} data-testid=\"interaction\">\n <qti-prompt>\n <p>Which of the following features are <strong>new</strong> to QTI 3?</p>\n </qti-prompt>\n <qti-simple-choice identifier=\"A\">Option A</qti-simple-choice>\n <qti-simple-choice identifier=\"B\">Option B</qti-simple-choice>\n <qti-simple-choice identifier=\"C\">Option C</qti-simple-choice>\n <qti-simple-choice identifier=\"D\"\n >This is a very long option text that should wrap to the next line instead of overflowing outside its\n container when rendered properly. The text should respect the container boundaries and not break the\n layout.</qti-simple-choice\n >\n </qti-choice-interaction>\n </div>\n `;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qti-components/choice-interaction",
|
|
3
3
|
"description": "QTI choice-interaction interaction",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.2.0-next.2",
|
|
5
5
|
"author": "",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@qti-components/base": "^2.5.0-next.
|
|
8
|
-
"@qti-components/interactions-core": "^2.
|
|
7
|
+
"@qti-components/base": "^2.5.0-next.2",
|
|
8
|
+
"@qti-components/interactions-core": "^2.2.0-next.3",
|
|
9
9
|
"@qti-components/utilities": "^1.3.3"
|
|
10
10
|
},
|
|
11
11
|
"devDependencies": {
|