@v-miniapp/ui-react 1.0.41 → 1.0.47

package/dist-storybook/assets/checkbox.stories-BY8W9TRC.js

@@ -0,0 +1,201 @@
+import{j as o,r as i}from"./iframe-CLEfhyJc.js";import{T as g,S as v,M as f,P as j,a as N}from"./blocks-CpOj9FQ_.js";import{C as n}from"./checkbox-CMpJJxvm.js";import{B as D}from"./button-GtWXUngt.js";import{t as e}from"./store-D2RudmNr.js";import"./preload-helper-PPVm8Dsz.js";import"./index-CaMbLGUB.js";import"./classname-DoNrELT0.js";import"./index-DRIh_SUo.js";import"./index-B-Ksafg0.js";import"./typography-DoV67nnS.js";import"./colors-_6nFGM3e.js";import"./icon-TJ3FHxUI.js";const S=()=>{const t=`
+## ${e("common.table.title")}
+
+| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`checked\` | \`boolean\` | ${e("common.table.no")} | ${e("components.checkbox.checkedDescription")} |
+| \`defaultChecked\` | \`boolean\` | ${e("common.table.no")} | ${e("components.checkbox.defaultCheckedDescription")} |
+| \`disabled\` | \`boolean\` | ${e("common.table.no")} | ${e("components.checkbox.disabledDescription")} |
+| \`theme\` | \`'brand' | 'inverse'\` | ${e("common.table.no")} | ${e("components.checkbox.themeDescription")} |
+| \`variant\` | \`'default' | 'number' | 'indeterminate'\` | ${e("common.table.no")} | ${e("components.checkbox.variantDescription")} |
+| \`number\` | \`number\` | ${e("common.table.no")} | ${e("components.checkbox.numberDescription")} |
+| \`defaultNumber\` | \`number\` | ${e("common.table.no")} | ${e("components.checkbox.defaultNumberDescription")} |
+| \`onChange\` | \`(checked: boolean) => void\` | ${e("common.table.no")} | ${e("components.checkbox.onChangeDescription")} |
+| \`onNumberChange\` | \`(number: number | undefined) => void\` | ${e("common.table.no")} | ${e("components.checkbox.onNumberChangeDescription")} |
+| \`children\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.checkbox.childrenDescription")} |
+| \`typography\` | \`Omit<ITypographyProps<'span'>, 'component' | 'children'>\` | ${e("common.table.no")} | ${e("components.checkbox.typographyDescription")} |
+| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.checkbox.classNameDescription")} |
+| \`...props\` | \`ComponentProps<'input'>\` | ${e("common.table.no")} | ${e("components.checkbox.propsDescription")} |
+  `;return o.jsxs(o.Fragment,{children:[o.jsx(g,{}),o.jsx(v,{}),o.jsx(f,{children:e("components.checkbox.description")}),o.jsx(j,{}),o.jsx(f,{children:t}),o.jsx(N,{})]})},M={title:"Components/Checkbox",component:n,parameters:{layout:"padded",docs:{page:S}},tags:["autodocs"],argTypes:{checked:{control:"boolean",description:e("components.checkbox.argTypes.checkedDescription"),table:{type:{summary:"boolean"}}},defaultChecked:{control:"boolean",description:e("components.checkbox.argTypes.defaultCheckedDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},disabled:{control:"boolean",description:e("components.checkbox.argTypes.disabledDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}},theme:{control:"select",options:["default","brand","inverse"],description:e("components.checkbox.argTypes.themeDescription"),table:{type:{summary:"ICheckboxTheme"},defaultValue:{summary:"default"}}},variant:{control:"select",options:["default","number","indeterminate"],description:e("components.checkbox.argTypes.variantDescription"),table:{type:{summary:"ICheckboxVariant"},defaultValue:{summary:"default"}}},number:{control:{type:"number",min:0,max:99,step:1},description:e("components.checkbox.argTypes.numberDescription"),table:{type:{summary:"number"}}},defaultNumber:{control:{type:"number",min:0,max:99,step:1},description:e("components.checkbox.argTypes.defaultNumberDescription"),table:{type:{summary:"number"}}},children:{control:"text",description:e("components.checkbox.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}}}},a={storyName:e("components.checkbox.stories.default.title"),args:{children:e("components.checkbox.stories.interactive.label")}},m={storyName:e("components.checkbox.stories.states.title"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(n,{checked:!1,children:e("components.checkbox.stories.states.notChecked")}),o.jsx(n,{checked:!0,children:e("components.checkbox.stories.states.checked")}),o.jsx(n,{checked:!0,disabled:!0,children:e("components.checkbox.stories.states.disabledChecked")}),o.jsx(n,{checked:!1,disabled:!0,children:e("components.checkbox.stories.states.disabledUnchecked")})]})},l={storyName:e("components.checkbox.stories.variants.title"),render:()=>{const[t,c]=i.useState(3);return o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(n,{checked:!0,variant:"default",children:e("components.checkbox.stories.variants.defaultCheckbox")}),o.jsx(n,{checked:!0,variant:"indeterminate",children:e("components.checkbox.stories.variants.indeterminateCheckbox")}),o.jsx(n,{checked:t>0,variant:"number",number:t,onNumberChange:r=>c(r||0),children:e("components.checkbox.stories.variants.quantity",{count:t})})]})}},p={storyName:e("components.checkbox.stories.themes.title"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(n,{checked:!0,children:e("components.checkbox.stories.themes.brandTheme")}),o.jsx(n,{checked:!0,theme:"inverse",children:e("components.checkbox.stories.themes.inverseTheme")})]})},d={storyName:e("components.checkbox.stories.controlled.title"),render:()=>{const[t,c]=i.useState(!1);return o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(n,{checked:t,onChange:c,children:e("components.checkbox.stories.controlled.currently",{state:t?e("components.checkbox.stories.controlled.checked"):e("components.checkbox.stories.controlled.unchecked")})}),o.jsx(D,{onClick:()=>c(!t),children:e("components.checkbox.stories.controlled.toggleButton")})]})}},h={storyName:e("components.checkbox.stories.numberVariant.title"),render:()=>{const[t,c]=i.useState(1);return o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(n,{variant:"number",number:t,onNumberChange:r=>c(r||0),children:e("components.checkbox.stories.numberVariant.quantity")}),o.jsx("p",{style:{fontSize:"14px",color:"#666"},children:e("components.checkbox.stories.numberVariant.instructions",{count:t})})]})}},b={storyName:e("components.checkbox.stories.checkboxGroup.title"),render:()=>{const[t,c]=i.useState([]),r=["Option 1","Option 2","Option 3"],k=(s,y)=>{c(y?[...t,s]:t.filter(C=>C!==s))};return o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[r.map(s=>o.jsx(n,{checked:t.includes(s),onChange:y=>k(s,y),children:e(`components.checkbox.stories.checkboxGroup.options.${s}`)},s)),o.jsxs("p",{style:{fontSize:"14px",color:"#666",marginTop:"8px"},children:[e("components.checkbox.stories.checkboxGroup.selected")," ",t.join(", ")||e("components.checkbox.stories.checkboxGroup.none")]})]})}},x={storyName:e("components.checkbox.stories.completeExample.title"),render:()=>{const[t,c]=i.useState(!1),[r,k]=i.useState(2);return o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[o.jsxs("div",{children:[o.jsx("h3",{style:{marginBottom:"12px"},children:e("components.checkbox.stories.complete.termsTitle")}),o.jsx(n,{checked:t,onChange:c,children:e("components.checkbox.stories.complete.agreeTerms")})]}),o.jsxs("div",{children:[o.jsx("h3",{style:{marginBottom:"12px"},children:e("components.checkbox.stories.complete.quantityTitle")}),o.jsx(n,{variant:"number",number:r,onNumberChange:s=>k(s||0),children:e("components.checkbox.stories.complete.items")})]}),o.jsxs("div",{children:[o.jsx("h3",{style:{marginBottom:"12px"},children:e("components.checkbox.stories.complete.disabledTitle")}),o.jsx(n,{checked:!0,disabled:!0,children:e("components.checkbox.stories.complete.disabledOption")})]})]})}},u={storyName:e("components.checkbox.stories.interactive.title"),args:{children:e("components.checkbox.stories.interactive.label"),checked:!1,disabled:!1,variant:"default"}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.default.title'),
+  args: {
+    children: t('components.checkbox.stories.interactive.label')
+  }
+}`,...a.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.states.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Checkbox checked={false}>
+        {t('components.checkbox.stories.states.notChecked')}
+      </Checkbox>
+      <Checkbox checked>
+        {t('components.checkbox.stories.states.checked')}
+      </Checkbox>
+      <Checkbox checked disabled>
+        {t('components.checkbox.stories.states.disabledChecked')}
+      </Checkbox>
+      <Checkbox checked={false} disabled>
+        {t('components.checkbox.stories.states.disabledUnchecked')}
+      </Checkbox>
+    </div>
+}`,...m.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.variants.title'),
+  render: () => {
+    const [number, setNumber] = useState(3);
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <Checkbox checked variant="default">
+          {t('components.checkbox.stories.variants.defaultCheckbox')}
+        </Checkbox>
+        <Checkbox checked variant="indeterminate">
+          {t('components.checkbox.stories.variants.indeterminateCheckbox')}
+        </Checkbox>
+        <Checkbox checked={number > 0} variant="number" number={number} onNumberChange={number => setNumber(number || 0)}>
+          {t('components.checkbox.stories.variants.quantity', {
+          count: number
+        })}
+        </Checkbox>
+      </div>;
+  }
+}`,...l.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.themes.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }}>
+      <Checkbox checked>
+        {t('components.checkbox.stories.themes.brandTheme')}
+      </Checkbox>
+      <Checkbox checked theme="inverse">
+        {t('components.checkbox.stories.themes.inverseTheme')}
+      </Checkbox>
+    </div>
+}`,...p.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.controlled.title'),
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <Checkbox checked={checked} onChange={setChecked}>
+          {t('components.checkbox.stories.controlled.currently', {
+          state: checked ? t('components.checkbox.stories.controlled.checked') : t('components.checkbox.stories.controlled.unchecked')
+        })}
+        </Checkbox>
+        <Button onClick={() => setChecked(!checked)}>
+          {t('components.checkbox.stories.controlled.toggleButton')}
+        </Button>
+      </div>;
+  }
+}`,...d.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.numberVariant.title'),
+  render: () => {
+    const [quantity, setQuantity] = useState(1);
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }}>
+        <Checkbox variant="number" number={quantity} onNumberChange={number => setQuantity(number || 0)}>
+          {t('components.checkbox.stories.numberVariant.quantity')}
+        </Checkbox>
+        <p style={{
+        fontSize: '14px',
+        color: '#666'
+      }}>
+          {t('components.checkbox.stories.numberVariant.instructions', {
+          count: quantity
+        })}
+        </p>
+      </div>;
+  }
+}`,...h.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.checkboxGroup.title'),
+  render: () => {
+    const [selected, setSelected] = useState<string[]>([]);
+    const options = ['Option 1', 'Option 2', 'Option 3'];
+    const handleChange = (option: string, checked: boolean) => {
+      if (checked) {
+        setSelected([...selected, option]);
+      } else {
+        setSelected(selected.filter(o => o !== option));
+      }
+    };
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '12px'
+    }}>
+        {options.map(option => <Checkbox key={option} checked={selected.includes(option)} onChange={checked => handleChange(option, checked)}>
+            {t(\`components.checkbox.stories.checkboxGroup.options.\${option}\`)}
+          </Checkbox>)}
+        <p style={{
+        fontSize: '14px',
+        color: '#666',
+        marginTop: '8px'
+      }}>
+          {t('components.checkbox.stories.checkboxGroup.selected')}{' '}
+          {selected.join(', ') || t('components.checkbox.stories.checkboxGroup.none')}
+        </p>
+      </div>;
+  }
+}`,...b.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.completeExample.title'),
+  render: () => {
+    const [terms, setTerms] = useState(false);
+    const [quantity, setQuantity] = useState(2);
+    return <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px'
+    }}>
+        <div>
+          <h3 style={{
+          marginBottom: '12px'
+        }}>
+            {t('components.checkbox.stories.complete.termsTitle')}
+          </h3>
+          <Checkbox checked={terms} onChange={setTerms}>
+            {t('components.checkbox.stories.complete.agreeTerms')}
+          </Checkbox>
+        </div>
+        <div>
+          <h3 style={{
+          marginBottom: '12px'
+        }}>
+            {t('components.checkbox.stories.complete.quantityTitle')}
+          </h3>
+          <Checkbox variant="number" number={quantity} onNumberChange={number => setQuantity(number || 0)}>
+            {t('components.checkbox.stories.complete.items')}
+          </Checkbox>
+        </div>
+        <div>
+          <h3 style={{
+          marginBottom: '12px'
+        }}>
+            {t('components.checkbox.stories.complete.disabledTitle')}
+          </h3>
+          <Checkbox checked disabled>
+            {t('components.checkbox.stories.complete.disabledOption')}
+          </Checkbox>
+        </div>
+      </div>;
+  }
+}`,...x.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.checkbox.stories.interactive.title'),
+  args: {
+    children: t('components.checkbox.stories.interactive.label'),
+    checked: false,
+    disabled: false,
+    variant: 'default'
+  }
+}`,...u.parameters?.docs?.source}}};const U=["Default","States","Variants","Themes","Controlled","NumberVariant","CheckboxGroup","CompleteExample","Interactive"];export{b as CheckboxGroup,x as CompleteExample,d as Controlled,a as Default,u as Interactive,h as NumberVariant,m as States,p as Themes,l as Variants,U as __namedExportsOrder,M as default};