@v-miniapp/ui-react 1.0.41 → 1.0.47
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/README.md +1 -1
- package/dist/components/app/types/app.d.ts +10 -0
- package/dist/components/app/utils/data-theme.d.ts +1 -2
- package/dist/components/carousel/index.d.ts +1 -0
- package/dist/external/index.js +2530 -2519
- package/dist/index.js +2308 -2297
- package/dist-storybook/assets/ANIMATION-DLCDVwPI.js +99 -0
- package/dist-storybook/assets/APP_FRAMEWORK-B9Mrudgl.js +197 -0
- package/dist-storybook/assets/BOTTOM_TAB_BAR-Bgfy-nnv.js +175 -0
- package/dist-storybook/assets/CUSTOM_ERROR_BOUNDARY-G_i_6aho.js +250 -0
- package/dist-storybook/assets/Color-AVL7NMMY-OD8SQvXt.js +1 -0
- package/dist-storybook/assets/DocsRenderer-PQXLIZUC-D8kbgtPd.js +2 -0
- package/dist-storybook/assets/GETTING_STARTED-Bf6ENjZo.js +77 -0
- package/dist-storybook/assets/INFINITE_SCROLL-O36i5W8i.js +111 -0
- package/dist-storybook/assets/KEEP_ALIVE-CicDtVw6.js +126 -0
- package/dist-storybook/assets/LOCALE-D_43J3RD.js +465 -0
- package/dist-storybook/assets/MIGRATION_GUIDE-Dn2gFk5v.js +449 -0
- package/dist-storybook/assets/MOBILE_BEHAVIOURS-D5jOxNiz.js +177 -0
- package/dist-storybook/assets/PAGE_LAYOUT-C0sW9iZo.js +192 -0
- package/dist-storybook/assets/ROUTING_NAVIGATION-Bpj_mu5r.js +335 -0
- package/dist-storybook/assets/TAILWIND_INTEGRATION-CVrohRXO.js +87 -0
- package/dist-storybook/assets/THEME_MODE-Sc8cgznR.js +111 -0
- package/dist-storybook/assets/_setToString-CjYxL0rS.js +1 -0
- package/dist-storybook/assets/alert-abKmNYys.js +1 -0
- package/dist-storybook/assets/alert.stories-XyvS4WTm.js +110 -0
- package/dist-storybook/assets/avatar-B-jvPnzm.js +1 -0
- package/dist-storybook/assets/avatar.stories-glTjw5Kd.js +136 -0
- package/dist-storybook/assets/axe-B8nlqekz.js +20 -0
- package/dist-storybook/assets/badge-Cc9u7jBX.js +1 -0
- package/dist-storybook/assets/badge.stories-CeNmmdtv.js +262 -0
- package/dist-storybook/assets/blocks-CpOj9FQ_.js +1243 -0
- package/dist-storybook/assets/bottom-tab-bar-BsPd0FD7.js +115 -0
- package/dist-storybook/assets/bottom-tab-bar.stories-BG1ee2eN.js +186 -0
- package/dist-storybook/assets/button-GtWXUngt.js +1 -0
- package/dist-storybook/assets/button.stories-3d_T0h_Z.js +287 -0
- package/dist-storybook/assets/calendar-CJ5_NxYx.js +1 -0
- package/dist-storybook/assets/calendar.stories-DEleEKoa.js +189 -0
- package/dist-storybook/assets/carousel-sbzGq2WF.js +37 -0
- package/dist-storybook/assets/carousel.stories-DY9nDa3M.js +217 -0
- package/dist-storybook/assets/checkbox-CMpJJxvm.js +1 -0
- package/dist-storybook/assets/checkbox.stories-BY8W9TRC.js +201 -0
- package/dist-storybook/assets/chip-zY6gJxDk.js +247 -0
- package/dist-storybook/assets/chip.stories-CXh30Tdq.js +442 -0
- package/dist-storybook/assets/classname-DoNrELT0.js +1 -0
- package/dist-storybook/assets/colors-_6nFGM3e.js +1 -0
- package/dist-storybook/assets/date-Ci5dIit0.js +1 -0
- package/dist-storybook/assets/date-field.stories-CerGwXZy.js +129 -0
- package/dist-storybook/assets/date-picker-BCIW_1-h.js +1 -0
- package/dist-storybook/assets/date-picker.stories-DUaL7sft.js +123 -0
- package/dist-storybook/assets/default-error-BcnD8fFO.png +0 -0
- package/dist-storybook/assets/dialog.stories-BtQMDA-1.js +212 -0
- package/dist-storybook/assets/dropdown.stories-DF69os0J.js +200 -0
- package/dist-storybook/assets/embla-carousel-react.esm-CCQjHA-d.js +1 -0
- package/dist-storybook/assets/en-Cs9O0XWn.js +15 -0
- package/dist-storybook/assets/icon-TJ3FHxUI.js +1 -0
- package/dist-storybook/assets/icon.stories-Ch36FMIn.js +365 -0
- package/dist-storybook/assets/iframe-CLEfhyJc.js +1071 -0
- package/dist-storybook/assets/iframe-yMKl6hJA.css +1 -0
- package/dist-storybook/assets/image-D6Yo4ht9.js +9 -0
- package/dist-storybook/assets/image.stories-CJPB43ys.js +255 -0
- package/dist-storybook/assets/index-7xlKHfV2.js +1 -0
- package/dist-storybook/assets/index-B-Ksafg0.js +1 -0
- package/dist-storybook/assets/index-CaMbLGUB.js +1 -0
- package/dist-storybook/assets/index-DRIh_SUo.js +1 -0
- package/dist-storybook/assets/input-wrapper-D_9hAdHZ.js +1 -0
- package/dist-storybook/assets/label-fI1oWVKU.js +27 -0
- package/dist-storybook/assets/label.stories-C3xDUHd-.js +138 -0
- package/dist-storybook/assets/matchers-7Z3WT2CE-Dw4MQV_s.js +14 -0
- package/dist-storybook/assets/navigation-bar-CiGSH7u8.js +79 -0
- package/dist-storybook/assets/navigation-bar.stories-BvGp7uJf.js +73 -0
- package/dist-storybook/assets/number-field-DNj4myBV.js +1 -0
- package/dist-storybook/assets/number-field.stories-B_Bj8RqE.js +167 -0
- package/dist-storybook/assets/omit-CStFhbPt.js +1 -0
- package/dist-storybook/assets/option-item-BloohEvW.js +1 -0
- package/dist-storybook/assets/option-item.stories-BjtolfPz.js +66 -0
- package/dist-storybook/assets/pagination-Dcazh6R_.js +1 -0
- package/dist-storybook/assets/pagination.stories-CrGsYeRw.js +91 -0
- package/dist-storybook/assets/pick-DbIUGM9R.js +1 -0
- package/dist-storybook/assets/preload-helper-PPVm8Dsz.js +1 -0
- package/dist-storybook/assets/radio-t2E8E0Oc.js +1 -0
- package/dist-storybook/assets/radio.stories-BEG-zTwI.js +183 -0
- package/dist-storybook/assets/rating-DsULci27.js +1 -0
- package/dist-storybook/assets/rating.stories-Dwk8Ov3Q.js +117 -0
- package/dist-storybook/assets/react-18-4mLDkQmf.js +9 -0
- package/dist-storybook/assets/react-mAVd1wAc.js +1 -0
- package/dist-storybook/assets/search-field-CuiHMy7j.js +1 -0
- package/dist-storybook/assets/search-field.stories-BnsT36yY.js +79 -0
- package/dist-storybook/assets/section-content-pkGNuEs6.js +1 -0
- package/dist-storybook/assets/section.stories-B5IhLkbG.js +69 -0
- package/dist-storybook/assets/sheet.stories-COzxyiqj.js +152 -0
- package/dist-storybook/assets/skeleton-Dn8rwbgX.js +1 -0
- package/dist-storybook/assets/skeleton.stories-B71MlMyi.js +139 -0
- package/dist-storybook/assets/store-D2RudmNr.js +18 -0
- package/dist-storybook/assets/store-DxAqU1JB.js +1 -0
- package/dist-storybook/assets/switch-BziC1t_8.js +1 -0
- package/dist-storybook/assets/switch.stories-DMBBwZef.js +250 -0
- package/dist-storybook/assets/tab-bar-DZ3oOU50.js +31 -0
- package/dist-storybook/assets/tab-bar.stories-Bp9w6nc3.js +136 -0
- package/dist-storybook/assets/text-area-CAmJ2yms.js +1 -0
- package/dist-storybook/assets/text-area.stories-BZ3HXtij.js +87 -0
- package/dist-storybook/assets/text-field-CjrgfYOZ.js +1 -0
- package/dist-storybook/assets/text-field.stories-vSXYvs0U.js +92 -0
- package/dist-storybook/assets/toast-provider-B9k1NBG6.js +9 -0
- package/dist-storybook/assets/toast.stories-DQKbk7dO.js +201 -0
- package/dist-storybook/assets/tooltip-VnA8Hy0S.js +1 -0
- package/dist-storybook/assets/tooltip.stories-wuthZ3Sv.js +153 -0
- package/dist-storybook/assets/typography-DoV67nnS.js +1 -0
- package/dist-storybook/assets/typography.stories-DD9HLY16.js +202 -0
- package/dist-storybook/assets/uploader.stories-sModULvT.js +65 -0
- package/dist-storybook/assets/use-app-pause-BQYQ2_kc.js +29 -0
- package/dist-storybook/assets/use-app-resume-BHDCAORn.js +29 -0
- package/dist-storybook/assets/use-custom-icon-event-BCGSFwaE.js +29 -0
- package/dist-storybook/assets/use-did-hide-Cosc0Bts.js +48 -0
- package/dist-storybook/assets/use-did-show-CTWe5NYk.js +49 -0
- package/dist-storybook/assets/use-histories-CAcE6nVz.js +50 -0
- package/dist-storybook/assets/use-history-FuEbPpap.js +67 -0
- package/dist-storybook/assets/use-location-CdUC1tic.js +56 -0
- package/dist-storybook/assets/use-navigate-DP9paY1K.js +84 -0
- package/dist-storybook/assets/use-navigation-type-BWVxMUtZ.js +44 -0
- package/dist-storybook/assets/use-page-config-5u8OF-8L.js +48 -0
- package/dist-storybook/assets/use-page-scroll-nPQcBn5B.js +69 -0
- package/dist-storybook/assets/use-page-state-CULl52gw.js +79 -0
- package/dist-storybook/assets/use-settings-changed-2GP5ZsJS.js +29 -0
- package/dist-storybook/assets/v-mini-icon-Dn1BmJzb.woff2 +0 -0
- package/dist-storybook/assets/visibility-sensor-huP-8j4n.js +1 -0
- package/dist-storybook/iframe.html +670 -0
- package/dist-storybook/index.html +132 -0
- package/dist-storybook/index.json +1 -0
- package/dist-storybook/project.json +1 -0
- package/dist-storybook/sb-addons/a11y-2/manager-bundle.js +5 -0
- package/dist-storybook/sb-addons/docs-1/manager-bundle.js +151 -0
- package/dist-storybook/sb-addons/storybook-build-3/manager-bundle.js +3 -0
- package/dist-storybook/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +971 -0
- package/dist-storybook/sb-manager/globals-module-info.js +799 -0
- package/dist-storybook/sb-manager/globals-runtime.js +69791 -0
- package/dist-storybook/sb-manager/globals.js +34 -0
- package/dist-storybook/sb-manager/runtime.js +13198 -0
- package/dist-storybook/stories-data.json +374 -0
- package/dist-storybook/vite-inject-mocker-entry.js +2 -0
- package/package.json +1 -1
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
import{j as o,r as h}from"./iframe-CLEfhyJc.js";import{T as g,S as b,M as y,P as k,a as v}from"./blocks-CpOj9FQ_.js";import{t as e}from"./store-D2RudmNr.js";import{R as t}from"./radio-t2E8E0Oc.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";const f=()=>{const a=`
|
|
2
|
+
## ${e("common.table.title")}
|
|
3
|
+
|
|
4
|
+
| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
|
|
5
|
+
| :--- | :--- | :--- | :--- |
|
|
6
|
+
| \`checked\` | \`boolean\` | ${e("common.table.no")} | ${e("components.radio.checkedDescription")} |
|
|
7
|
+
| \`onChange\` | \`(checked: boolean) => void\` | ${e("common.table.no")} | ${e("components.radio.onChangeDescription")} |
|
|
8
|
+
| \`disabled\` | \`boolean\` | ${e("common.table.no")} | ${e("components.radio.disabledDescription")} |
|
|
9
|
+
| \`theme\` | \`'default' | 'brand' | 'neutral'\` | ${e("common.table.no")} | ${e("components.radio.themeDescription")} |
|
|
10
|
+
| \`type\` | \`'checkbox' | 'radio'\` | ${e("common.table.no")} | ${e("components.radio.typeDescription")} |
|
|
11
|
+
| \`name\` | \`string\` | ${e("common.table.no")} | ${e("components.radio.nameDescription")} |
|
|
12
|
+
| \`value\` | \`string\` | ${e("common.table.no")} | ${e("components.radio.valueDescription")} |
|
|
13
|
+
| \`children\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.radio.childrenDescription")} |
|
|
14
|
+
| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.radio.classNameDescription")} |
|
|
15
|
+
| \`...props\` | \`ComponentProps<'input'>\` | ${e("common.table.no")} | ${e("components.radio.propsDescription")} |
|
|
16
|
+
`;return o.jsxs(o.Fragment,{children:[o.jsx(g,{}),o.jsx(b,{}),o.jsx(y,{children:e("components.radio.description")}),o.jsx(k,{}),o.jsx(y,{children:a}),o.jsx(v,{})]})},z={title:"Components/Radio",component:t,parameters:{layout:"padded",docs:{page:f}},tags:["autodocs"],argTypes:{checked:{control:"boolean",description:e("components.radio.argTypes.checkedDescription"),table:{type:{summary:"boolean"}}},onChange:{action:"changed",description:e("components.radio.argTypes.onChangeDescription"),table:{type:{summary:"(checked: boolean) => void"}}},disabled:{control:"boolean",description:e("components.radio.argTypes.disabledDescription"),table:{type:{summary:"boolean"}}},theme:{control:"select",options:["default","brand","neutral"],description:e("components.radio.argTypes.themeDescription"),table:{type:{summary:"IRadioTheme"},defaultValue:{summary:"default"}}},type:{control:"select",options:["checkbox","radio"],description:e("components.radio.argTypes.typeDescription"),table:{type:{summary:'"checkbox" | "radio"'},defaultValue:{summary:"radio"}}},name:{control:"text",description:e("components.radio.argTypes.nameDescription"),table:{type:{summary:"string"}}},value:{control:"text",description:e("components.radio.argTypes.valueDescription"),table:{type:{summary:"string"}}},children:{control:"text",description:e("components.radio.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}},className:{control:"text",description:e("components.radio.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},r={storyName:e("components.radio.stories.default.storyName"),args:{name:"option",value:"option1",children:e("components.radio.stories.default.text")}},n={storyName:e("components.radio.stories.states.storyName"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{name:"states",value:"unchecked",checked:!1,children:e("components.radio.states.unchecked")}),o.jsx(t,{name:"states",value:"checked",checked:!0,children:e("components.radio.states.checked")}),o.jsx(t,{name:"states",value:"disabled-checked",checked:!0,disabled:!0,children:e("components.radio.states.disabledChecked")}),o.jsx(t,{name:"states",value:"disabled-unchecked",checked:!1,disabled:!0,children:e("components.radio.states.disabledUnchecked")})]})},i={storyName:e("components.radio.stories.radioGroup.storyName"),render:()=>{const[a,s]=h.useState("option1");return o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[o.jsx(t,{name:"group",value:"option1",checked:a==="option1",onChange:()=>s("option1"),children:e("components.radio.stories.radioGroup.option1")}),o.jsx(t,{name:"group",value:"option2",checked:a==="option2",onChange:()=>s("option2"),children:e("components.radio.stories.radioGroup.option2")}),o.jsx(t,{name:"group",value:"option3",checked:a==="option3",onChange:()=>s("option3"),children:e("components.radio.stories.radioGroup.option3")}),o.jsxs("p",{style:{fontSize:"14px",color:"#666",marginTop:"8px"},children:[e("components.radio.stories.radioGroup.selected"),": ",a]})]})}},c={storyName:e("components.radio.stories.themes.storyName"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{name:"themes",value:"brand",checked:!0,theme:"brand",children:e("components.radio.stories.themes.brand")}),o.jsx(t,{name:"themes",value:"neutral",checked:!0,theme:"neutral",children:e("components.radio.stories.themes.neutral")})]})},d={storyName:e("components.radio.stories.checkboxType.storyName"),render:()=>{const[a,s]=h.useState(!1),[u,x]=h.useState(!0);return o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{type:"checkbox",checked:a,onChange:s,children:e("components.radio.stories.checkboxType.unchecked")}),o.jsx(t,{type:"checkbox",checked:u,onChange:x,children:e("components.radio.stories.checkboxType.checked")})]})}},p={storyName:e("components.radio.stories.typography.storyName"),render:()=>o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[o.jsx(t,{name:"typography",value:"default",checked:!0,typography:{size:"base",weight:"regular"},children:e("components.radio.stories.typography.default")}),o.jsx(t,{name:"typography",value:"large",checked:!0,typography:{size:"large",weight:"bold"},children:e("components.radio.stories.typography.large")}),o.jsx(t,{name:"typography",value:"small",checked:!0,typography:{size:"small",weight:"medium"},children:e("components.radio.stories.typography.small")})]})},m={storyName:e("components.radio.stories.completeExample.storyName"),render:()=>{const[a,s]=h.useState("credit");return o.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:o.jsxs("div",{children:[o.jsx("h3",{style:{marginBottom:"12px"},children:e("components.radio.stories.completeExample.title")}),o.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[o.jsx(t,{name:"payment",value:"credit",checked:a==="credit",onChange:()=>s("credit"),children:e("components.radio.stories.completeExample.creditCard")}),o.jsx(t,{name:"payment",value:"debit",checked:a==="debit",onChange:()=>s("debit"),children:e("components.radio.stories.completeExample.debitCard")}),o.jsx(t,{name:"payment",value:"paypal",checked:a==="paypal",onChange:()=>s("paypal"),children:e("components.radio.stories.completeExample.paypal")}),o.jsx(t,{name:"payment",value:"disabled",checked:a==="disabled",onChange:()=>s("disabled"),disabled:!0,children:e("components.radio.stories.completeExample.bankTransfer")})]}),o.jsxs("p",{style:{fontSize:"14px",color:"#666",marginTop:"8px"},children:[e("components.radio.stories.completeExample.selected"),":"," ",a]})]})})}},l={storyName:e("components.radio.stories.interactive.storyName"),args:{name:"interactive",value:"value1",children:e("components.radio.stories.interactive.text"),checked:!1,disabled:!1,theme:"default",type:"radio"}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
|
17
|
+
storyName: t('components.radio.stories.default.storyName'),
|
|
18
|
+
args: {
|
|
19
|
+
name: 'option',
|
|
20
|
+
value: 'option1',
|
|
21
|
+
children: t('components.radio.stories.default.text')
|
|
22
|
+
}
|
|
23
|
+
}`,...r.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
|
|
24
|
+
storyName: t('components.radio.stories.states.storyName'),
|
|
25
|
+
render: () => <div style={{
|
|
26
|
+
display: 'flex',
|
|
27
|
+
flexDirection: 'column',
|
|
28
|
+
gap: '16px'
|
|
29
|
+
}}>
|
|
30
|
+
<Radio name="states" value="unchecked" checked={false}>
|
|
31
|
+
{t('components.radio.states.unchecked')}
|
|
32
|
+
</Radio>
|
|
33
|
+
<Radio name="states" value="checked" checked>
|
|
34
|
+
{t('components.radio.states.checked')}
|
|
35
|
+
</Radio>
|
|
36
|
+
<Radio name="states" value="disabled-checked" checked disabled>
|
|
37
|
+
{t('components.radio.states.disabledChecked')}
|
|
38
|
+
</Radio>
|
|
39
|
+
<Radio name="states" value="disabled-unchecked" checked={false} disabled>
|
|
40
|
+
{t('components.radio.states.disabledUnchecked')}
|
|
41
|
+
</Radio>
|
|
42
|
+
</div>
|
|
43
|
+
}`,...n.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
|
44
|
+
storyName: t('components.radio.stories.radioGroup.storyName'),
|
|
45
|
+
render: () => {
|
|
46
|
+
const [selected, setSelected] = useState('option1');
|
|
47
|
+
return <div style={{
|
|
48
|
+
display: 'flex',
|
|
49
|
+
flexDirection: 'column',
|
|
50
|
+
gap: '12px'
|
|
51
|
+
}}>
|
|
52
|
+
<Radio name="group" value="option1" checked={selected === 'option1'} onChange={() => setSelected('option1')}>
|
|
53
|
+
{t('components.radio.stories.radioGroup.option1')}
|
|
54
|
+
</Radio>
|
|
55
|
+
<Radio name="group" value="option2" checked={selected === 'option2'} onChange={() => setSelected('option2')}>
|
|
56
|
+
{t('components.radio.stories.radioGroup.option2')}
|
|
57
|
+
</Radio>
|
|
58
|
+
<Radio name="group" value="option3" checked={selected === 'option3'} onChange={() => setSelected('option3')}>
|
|
59
|
+
{t('components.radio.stories.radioGroup.option3')}
|
|
60
|
+
</Radio>
|
|
61
|
+
<p style={{
|
|
62
|
+
fontSize: '14px',
|
|
63
|
+
color: '#666',
|
|
64
|
+
marginTop: '8px'
|
|
65
|
+
}}>
|
|
66
|
+
{t('components.radio.stories.radioGroup.selected')}: {selected}
|
|
67
|
+
</p>
|
|
68
|
+
</div>;
|
|
69
|
+
}
|
|
70
|
+
}`,...i.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
|
|
71
|
+
storyName: t('components.radio.stories.themes.storyName'),
|
|
72
|
+
render: () => <div style={{
|
|
73
|
+
display: 'flex',
|
|
74
|
+
flexDirection: 'column',
|
|
75
|
+
gap: '16px'
|
|
76
|
+
}}>
|
|
77
|
+
<Radio name="themes" value="brand" checked theme="brand">
|
|
78
|
+
{t('components.radio.stories.themes.brand')}
|
|
79
|
+
</Radio>
|
|
80
|
+
<Radio name="themes" value="neutral" checked theme="neutral">
|
|
81
|
+
{t('components.radio.stories.themes.neutral')}
|
|
82
|
+
</Radio>
|
|
83
|
+
</div>
|
|
84
|
+
}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
|
|
85
|
+
storyName: t('components.radio.stories.checkboxType.storyName'),
|
|
86
|
+
render: () => {
|
|
87
|
+
const [checked1, setChecked1] = useState(false);
|
|
88
|
+
const [checked2, setChecked2] = useState(true);
|
|
89
|
+
return <div style={{
|
|
90
|
+
display: 'flex',
|
|
91
|
+
flexDirection: 'column',
|
|
92
|
+
gap: '16px'
|
|
93
|
+
}}>
|
|
94
|
+
<Radio type="checkbox" checked={checked1} onChange={setChecked1}>
|
|
95
|
+
{t('components.radio.stories.checkboxType.unchecked')}
|
|
96
|
+
</Radio>
|
|
97
|
+
<Radio type="checkbox" checked={checked2} onChange={setChecked2}>
|
|
98
|
+
{t('components.radio.stories.checkboxType.checked')}
|
|
99
|
+
</Radio>
|
|
100
|
+
</div>;
|
|
101
|
+
}
|
|
102
|
+
}`,...d.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
|
|
103
|
+
storyName: t('components.radio.stories.typography.storyName'),
|
|
104
|
+
render: () => <div style={{
|
|
105
|
+
display: 'flex',
|
|
106
|
+
flexDirection: 'column',
|
|
107
|
+
gap: '16px'
|
|
108
|
+
}}>
|
|
109
|
+
<Radio name="typography" value="default" checked typography={{
|
|
110
|
+
size: 'base',
|
|
111
|
+
weight: 'regular'
|
|
112
|
+
}}>
|
|
113
|
+
{t('components.radio.stories.typography.default')}
|
|
114
|
+
</Radio>
|
|
115
|
+
<Radio name="typography" value="large" checked typography={{
|
|
116
|
+
size: 'large',
|
|
117
|
+
weight: 'bold'
|
|
118
|
+
}}>
|
|
119
|
+
{t('components.radio.stories.typography.large')}
|
|
120
|
+
</Radio>
|
|
121
|
+
<Radio name="typography" value="small" checked typography={{
|
|
122
|
+
size: 'small',
|
|
123
|
+
weight: 'medium'
|
|
124
|
+
}}>
|
|
125
|
+
{t('components.radio.stories.typography.small')}
|
|
126
|
+
</Radio>
|
|
127
|
+
</div>
|
|
128
|
+
}`,...p.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
|
|
129
|
+
storyName: t('components.radio.stories.completeExample.storyName'),
|
|
130
|
+
render: () => {
|
|
131
|
+
const [paymentMethod, setPaymentMethod] = useState('credit');
|
|
132
|
+
return <div style={{
|
|
133
|
+
display: 'flex',
|
|
134
|
+
flexDirection: 'column',
|
|
135
|
+
gap: '24px'
|
|
136
|
+
}}>
|
|
137
|
+
<div>
|
|
138
|
+
<h3 style={{
|
|
139
|
+
marginBottom: '12px'
|
|
140
|
+
}}>
|
|
141
|
+
{t('components.radio.stories.completeExample.title')}
|
|
142
|
+
</h3>
|
|
143
|
+
<div style={{
|
|
144
|
+
display: 'flex',
|
|
145
|
+
flexDirection: 'column',
|
|
146
|
+
gap: '12px'
|
|
147
|
+
}}>
|
|
148
|
+
<Radio name="payment" value="credit" checked={paymentMethod === 'credit'} onChange={() => setPaymentMethod('credit')}>
|
|
149
|
+
{t('components.radio.stories.completeExample.creditCard')}
|
|
150
|
+
</Radio>
|
|
151
|
+
<Radio name="payment" value="debit" checked={paymentMethod === 'debit'} onChange={() => setPaymentMethod('debit')}>
|
|
152
|
+
{t('components.radio.stories.completeExample.debitCard')}
|
|
153
|
+
</Radio>
|
|
154
|
+
<Radio name="payment" value="paypal" checked={paymentMethod === 'paypal'} onChange={() => setPaymentMethod('paypal')}>
|
|
155
|
+
{t('components.radio.stories.completeExample.paypal')}
|
|
156
|
+
</Radio>
|
|
157
|
+
<Radio name="payment" value="disabled" checked={paymentMethod === 'disabled'} onChange={() => setPaymentMethod('disabled')} disabled>
|
|
158
|
+
{t('components.radio.stories.completeExample.bankTransfer')}
|
|
159
|
+
</Radio>
|
|
160
|
+
</div>
|
|
161
|
+
<p style={{
|
|
162
|
+
fontSize: '14px',
|
|
163
|
+
color: '#666',
|
|
164
|
+
marginTop: '8px'
|
|
165
|
+
}}>
|
|
166
|
+
{t('components.radio.stories.completeExample.selected')}:{' '}
|
|
167
|
+
{paymentMethod}
|
|
168
|
+
</p>
|
|
169
|
+
</div>
|
|
170
|
+
</div>;
|
|
171
|
+
}
|
|
172
|
+
}`,...m.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
|
|
173
|
+
storyName: t('components.radio.stories.interactive.storyName'),
|
|
174
|
+
args: {
|
|
175
|
+
name: 'interactive',
|
|
176
|
+
value: 'value1',
|
|
177
|
+
children: t('components.radio.stories.interactive.text'),
|
|
178
|
+
checked: false,
|
|
179
|
+
disabled: false,
|
|
180
|
+
theme: 'default',
|
|
181
|
+
type: 'radio'
|
|
182
|
+
}
|
|
183
|
+
}`,...l.parameters?.docs?.source}}};const P=["Default","States","RadioGroup","Themes","CheckboxType","WithCustomTypography","CompleteExample","Interactive"];export{d as CheckboxType,m as CompleteExample,r as Default,l as Interactive,i as RadioGroup,n as States,c as Themes,p as WithCustomTypography,P as __namedExportsOrder,z as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as f,j as e}from"./iframe-CLEfhyJc.js";import{g as p,c as _}from"./classname-DoNrELT0.js";import{u as j}from"./index-DRIh_SUo.js";const m=p("rating"),g=({value:r=0,...o})=>{const i=Math.max(Math.min(r,1),0)*100,s=f.useId(),t="M21.2849 7.66933C21.1676 7.308 20.8543 7.044 20.4783 6.98933L14.3183 6.09467L11.5636 0.512C11.2276 -0.170667 10.1063 -0.170667 9.77025 0.512L7.01559 6.09333L0.855586 6.988C0.479586 7.04267 0.166253 7.30667 0.0489193 7.668C-0.068414 8.02933 0.0289192 8.428 0.302253 8.69333L4.75959 13.0373L3.70625 19.172C3.64225 19.548 3.79559 19.9267 4.10359 20.1507C4.41159 20.3733 4.82092 20.4027 5.15692 20.2267L10.6663 17.3293L16.1756 20.2267C16.3223 20.304 16.4809 20.3413 16.6409 20.3413C16.8476 20.3413 17.0543 20.2773 17.2289 20.1507C17.5369 19.9267 17.6916 19.548 17.6263 19.172L16.5729 13.0373L21.0303 8.69333C21.3036 8.428 21.4009 8.02933 21.2836 7.668L21.2849 7.66933Z";return e.jsx("span",{className:`${m}__icon`,...o,children:e.jsxs("svg",{width:"100%",height:"100%",viewBox:"0 0 22 21",fill:"none",children:[e.jsx("defs",{children:e.jsx("clipPath",{id:s,children:e.jsx("path",{d:t})})}),e.jsx("path",{className:`${m}__icon-empty`,d:t}),e.jsx("rect",{className:`${m}__icon-filled`,width:`${i}%`,height:"100%",clipPath:`url(#${s})`})]})})};g.__docgenInfo={description:"",methods:[],displayName:"Star",props:{value:{defaultValue:{value:"0",computed:!1},required:!1}}};const v=5,d=p("rating"),L=r=>{const{size:o="medium",className:i,max:s=v,readonly:t=!1,defaultValue:$,onChange:M,value:P,...x}=r,[c,C]=j(r,{trigger:"onChange",valuePropName:"value",defaultValuePropName:"defaultValue"}),h=f.useMemo(()=>{const a=Math.max(Math.floor(s),0);if(a<=0)return[];const n=u=>{if(u+1<=c)return 1;const l=u+1-c;return l>1?0:1-l};return Array.from({length:a},(u,l)=>({value:n(l)}))},[c,s]),N=a=>{t||C(a+1)};return e.jsx("div",{className:_(d,{[`${d}--readonly`]:t,[`${d}--${o}`]:!0},i),...x,children:h.length?h.map((a,n)=>e.jsx(g,{value:a.value,onClick:()=>N(n)},n)):null})};L.__docgenInfo={description:"",methods:[],displayName:"Rating"};export{L as R};
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import{j as t,r as g}from"./iframe-CLEfhyJc.js";import{t as e}from"./store-D2RudmNr.js";import{R as n}from"./rating-DsULci27.js";import{T as u,S as y,M as p,P as x,a as f}from"./blocks-CpOj9FQ_.js";import"./preload-helper-PPVm8Dsz.js";import"./classname-DoNrELT0.js";import"./index-DRIh_SUo.js";import"./index-B-Ksafg0.js";import"./index-CaMbLGUB.js";const v=()=>{const l=`
|
|
2
|
+
## ${e("common.table.title")}
|
|
3
|
+
|
|
4
|
+
| ${e("common.table.name")} | ${e("common.table.type")} | ${e("common.table.required")} | ${e("common.table.description")} |
|
|
5
|
+
| :--- | :--- | :--- | :--- |
|
|
6
|
+
| \`value\` | \`number\` | ${e("common.table.no")} | ${e("components.rating.argTypes.valueDescription")} |
|
|
7
|
+
| \`defaultValue\` | \`number\` | ${e("common.table.no")} | ${e("components.rating.argTypes.defaultValueDescription")} |
|
|
8
|
+
| \`onChange\` | \`(value: number) => void\` | ${e("common.table.no")} | ${e("components.rating.argTypes.onChangeDescription")} |
|
|
9
|
+
| \`max\` | \`number\` | ${e("common.table.no")} | ${e("components.rating.argTypes.maxDescription")} |
|
|
10
|
+
| \`size\` | \`'medium' | 'large' | 'x-large'\` | ${e("common.table.no")} | ${e("components.rating.argTypes.sizeDescription")} |
|
|
11
|
+
| \`readonly\` | \`boolean\` | ${e("common.table.no")} | ${e("components.rating.argTypes.readOnlyDescription")} |
|
|
12
|
+
| \`allowHalf\` | \`boolean\` | ${e("common.table.no")} | ${e("components.rating.argTypes.allowHalfDescription")} |
|
|
13
|
+
| \`className\` | \`string\` | ${e("common.table.no")} | ${e("components.rating.argTypes.classNameDescription")} |
|
|
14
|
+
| \`count\` | \`number\` | ${e("common.table.no")} | ${e("components.rating.argTypes.countDescription")} |
|
|
15
|
+
| \`character\` | \`ReactNode\` | ${e("common.table.no")} | ${e("components.rating.argTypes.characterDescription")} |
|
|
16
|
+
| \`characterRender\` | \`(index: number) => ReactNode\` | ${e("common.table.no")} | ${e("components.rating.argTypes.characterRenderDescription")} |
|
|
17
|
+
| \`tooltips\` | \`string[]\` | ${e("common.table.no")} | ${e("components.rating.argTypes.tooltipsDescription")} |
|
|
18
|
+
| \`onHoverChange\` | \`(value: number) => void\` | ${e("common.table.no")} | ${e("components.rating.argTypes.onHoverChangeDescription")} |
|
|
19
|
+
| \`...props\` | \`ComponentPropsWithRef<'div'>\` | ${e("common.table.no")} | ${e("components.rating.argTypes.propsDescription")} |
|
|
20
|
+
`;return t.jsxs(t.Fragment,{children:[t.jsx(u,{}),t.jsx(y,{}),t.jsx(p,{children:e("components.rating.description")}),t.jsx(x,{}),t.jsx(p,{children:l}),t.jsx(f,{})]})},z={title:"Components/Rating",component:n,parameters:{layout:"padded",docs:{page:v}},tags:["autodocs"],argTypes:{value:{control:{type:"number",min:0,max:5,step:.5},description:e("components.rating.argTypes.valueDescription"),table:{type:{summary:"number"}}},defaultValue:{control:{type:"number",min:0,max:5,step:.5},description:e("components.rating.argTypes.defaultValueDescription"),table:{type:{summary:"number"}}},onChange:{action:"changed",description:e("components.rating.argTypes.onChangeDescription"),table:{type:{summary:"(value: number) => void"}}},max:{control:{type:"number",min:1,max:10,step:1},description:e("components.rating.argTypes.maxDescription"),table:{type:{summary:"number"},defaultValue:{summary:"5"}}},size:{control:"select",options:["medium","large","x-large"],description:e("components.rating.argTypes.sizeDescription"),table:{type:{summary:'"medium" | "large" | "x-large"'},defaultValue:{summary:"medium"}}},readonly:{control:"boolean",description:e("components.rating.argTypes.readOnlyDescription"),table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}}}},o={storyName:e("components.rating.stories.default.storyName"),name:e("components.rating.stories.default.name"),args:{defaultValue:3}},r={storyName:e("components.rating.stories.controlled.storyName"),name:e("components.rating.stories.controlled.name"),render:()=>{const[l,d]=g.useState(0);return t.jsx(n,{value:l,onChange:d})}},a={storyName:e("components.rating.stories.readonly.storyName"),name:e("components.rating.stories.readonly.name"),args:{value:4.5,readonly:!0}},s={storyName:e("components.rating.stories.customMaximum.storyName"),name:e("components.rating.stories.customMaximum.name"),args:{max:10,defaultValue:7}},i={storyName:e("components.rating.stories.differentSizes.storyName"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.rating.stories.differentSizes.medium")}),t.jsx(n,{size:"medium",defaultValue:3})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.rating.stories.differentSizes.large")}),t.jsx(n,{size:"large",defaultValue:4})]}),t.jsxs("div",{children:[t.jsx("h3",{style:{marginBottom:"12px"},children:e("components.rating.stories.differentSizes.xlarge")}),t.jsx(n,{size:"x-large",defaultValue:5})]})]})},m={storyName:e("components.rating.stories.withHalfStars.storyName"),render:()=>t.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[t.jsxs("div",{children:[t.jsx("p",{style:{marginBottom:"8px"},children:e("components.rating.stories.withHalfStars.threePointFive")}),t.jsx(n,{value:3.5,readonly:!0})]}),t.jsxs("div",{children:[t.jsx("p",{style:{marginBottom:"8px"},children:e("components.rating.stories.withHalfStars.fourPointTwo")}),t.jsx(n,{value:4.2,readonly:!0})]}),t.jsxs("div",{children:[t.jsx("p",{style:{marginBottom:"8px"},children:e("components.rating.stories.withHalfStars.twoPointSeven")}),t.jsx(n,{value:2.7,readonly:!0})]})]})},c={storyName:e("components.rating.stories.interactive.storyName"),name:e("components.rating.stories.interactive.name"),args:{defaultValue:0}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
|
|
21
|
+
storyName: t('components.rating.stories.default.storyName'),
|
|
22
|
+
name: t('components.rating.stories.default.name'),
|
|
23
|
+
args: {
|
|
24
|
+
defaultValue: 3
|
|
25
|
+
}
|
|
26
|
+
}`,...o.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
|
|
27
|
+
storyName: t('components.rating.stories.controlled.storyName'),
|
|
28
|
+
name: t('components.rating.stories.controlled.name'),
|
|
29
|
+
render: () => {
|
|
30
|
+
const [rating, setRating] = useState(0);
|
|
31
|
+
return <Rating value={rating} onChange={setRating} />;
|
|
32
|
+
}
|
|
33
|
+
}`,...r.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
|
|
34
|
+
storyName: t('components.rating.stories.readonly.storyName'),
|
|
35
|
+
name: t('components.rating.stories.readonly.name'),
|
|
36
|
+
args: {
|
|
37
|
+
value: 4.5,
|
|
38
|
+
readonly: true
|
|
39
|
+
}
|
|
40
|
+
}`,...a.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
|
|
41
|
+
storyName: t('components.rating.stories.customMaximum.storyName'),
|
|
42
|
+
name: t('components.rating.stories.customMaximum.name'),
|
|
43
|
+
args: {
|
|
44
|
+
max: 10,
|
|
45
|
+
defaultValue: 7
|
|
46
|
+
}
|
|
47
|
+
}`,...s.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
|
|
48
|
+
storyName: t('components.rating.stories.differentSizes.storyName'),
|
|
49
|
+
render: () => <div style={{
|
|
50
|
+
display: 'flex',
|
|
51
|
+
flexDirection: 'column',
|
|
52
|
+
gap: '24px'
|
|
53
|
+
}}>
|
|
54
|
+
<div>
|
|
55
|
+
<h3 style={{
|
|
56
|
+
marginBottom: '12px'
|
|
57
|
+
}}>
|
|
58
|
+
{t('components.rating.stories.differentSizes.medium')}
|
|
59
|
+
</h3>
|
|
60
|
+
<Rating size="medium" defaultValue={3} />
|
|
61
|
+
</div>
|
|
62
|
+
<div>
|
|
63
|
+
<h3 style={{
|
|
64
|
+
marginBottom: '12px'
|
|
65
|
+
}}>
|
|
66
|
+
{t('components.rating.stories.differentSizes.large')}
|
|
67
|
+
</h3>
|
|
68
|
+
<Rating size="large" defaultValue={4} />
|
|
69
|
+
</div>
|
|
70
|
+
<div>
|
|
71
|
+
<h3 style={{
|
|
72
|
+
marginBottom: '12px'
|
|
73
|
+
}}>
|
|
74
|
+
{t('components.rating.stories.differentSizes.xlarge')}
|
|
75
|
+
</h3>
|
|
76
|
+
<Rating size="x-large" defaultValue={5} />
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
}`,...i.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
|
|
80
|
+
storyName: t('components.rating.stories.withHalfStars.storyName'),
|
|
81
|
+
render: () => <div style={{
|
|
82
|
+
display: 'flex',
|
|
83
|
+
flexDirection: 'column',
|
|
84
|
+
gap: '16px'
|
|
85
|
+
}}>
|
|
86
|
+
<div>
|
|
87
|
+
<p style={{
|
|
88
|
+
marginBottom: '8px'
|
|
89
|
+
}}>
|
|
90
|
+
{t('components.rating.stories.withHalfStars.threePointFive')}
|
|
91
|
+
</p>
|
|
92
|
+
<Rating value={3.5} readonly />
|
|
93
|
+
</div>
|
|
94
|
+
<div>
|
|
95
|
+
<p style={{
|
|
96
|
+
marginBottom: '8px'
|
|
97
|
+
}}>
|
|
98
|
+
{t('components.rating.stories.withHalfStars.fourPointTwo')}
|
|
99
|
+
</p>
|
|
100
|
+
<Rating value={4.2} readonly />
|
|
101
|
+
</div>
|
|
102
|
+
<div>
|
|
103
|
+
<p style={{
|
|
104
|
+
marginBottom: '8px'
|
|
105
|
+
}}>
|
|
106
|
+
{t('components.rating.stories.withHalfStars.twoPointSeven')}
|
|
107
|
+
</p>
|
|
108
|
+
<Rating value={2.7} readonly />
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
}`,...m.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
|
|
112
|
+
storyName: t('components.rating.stories.interactive.storyName'),
|
|
113
|
+
name: t('components.rating.stories.interactive.name'),
|
|
114
|
+
args: {
|
|
115
|
+
defaultValue: 0
|
|
116
|
+
}
|
|
117
|
+
}`,...c.parameters?.docs?.source}}};const V=["Default","Controlled","Readonly","CustomMaximum","DifferentSizes","WithHalfStars","Interactive"];export{r as Controlled,s as CustomMaximum,o as Default,i as DifferentSizes,c as Interactive,a as Readonly,m as WithHalfStars,V as __namedExportsOrder,z as default};
|