@v-miniapp/ui-react 1.0.41 → 1.0.45

package/dist-storybook/assets/badge-D_LzMVtw.js

@@ -0,0 +1 @@
+import{j as t}from"./iframe-CQAwSt4E.js";import{c as r,g as i}from"./classname-CUR_zgkh.js";import{T as m}from"./typography-DEpAJl_i.js";const a=i("badge"),d=({outline:e,children:s,className:o,...n})=>t.jsx(m,{...n,size:"2x-small",className:r(a,{[`${a}--outline`]:e,[`${a}--dot`]:!s},o),children:s}),p=({children:e,className:s,...o})=>t.jsx("div",{className:r(`${a}-container`,s),...o,children:e});d.__docgenInfo={description:"",methods:[],displayName:"Badge"};p.__docgenInfo={description:"",methods:[],displayName:"BadgeContainer"};export{d as B,p as a};

package/dist-storybook/assets/badge.stories-Be2ItCmQ.js

@@ -0,0 +1,262 @@
+import{j as e}from"./iframe-CQAwSt4E.js";import{T as u,S as h,M as m,P as B,a as y}from"./blocks-BuaOUtiH.js";import{B as n,a as s}from"./badge-D_LzMVtw.js";import{t}from"./store-D2RudmNr.js";import"./preload-helper-PPVm8Dsz.js";import"./index-DHiZ-gXR.js";import"./classname-CUR_zgkh.js";import"./typography-DEpAJl_i.js";import"./colors-_6nFGM3e.js";const j=()=>{const x=`
+## ${t("common.table.title")}
+
+| ${t("common.table.name")} | ${t("common.table.type")} | ${t("common.table.required")} | ${t("common.table.description")} |
+| :--- | :--- | :--- | :--- |
+| \`outline\` | \`boolean\` | ${t("common.table.no")} | ${t("components.badge.outlineDescription")} |
+| \`children\` | \`ReactNode\` | ${t("common.table.no")} | ${t("components.badge.childrenDescription")} |
+| \`className\` | \`string\` | ${t("common.table.no")} | ${t("components.badge.classNameDescription")} |
+| \`...props\` | \`ComponentProps<'div'>\` | ${t("common.table.no")} | ${t("components.badge.propsDescription")} |
+  `;return e.jsxs(e.Fragment,{children:[e.jsx(u,{}),e.jsx(h,{}),e.jsx(m,{children:t("components.badge.description")}),e.jsx(B,{}),e.jsx(m,{children:x}),e.jsx(y,{})]})},W={title:"Components/Badge",component:n,parameters:{layout:"padded",docs:{page:j}},tags:["autodocs"],argTypes:{outline:{control:"boolean",description:t("components.badge.argTypes.outlineDescription"),table:{type:{summary:"boolean"}}},children:{control:"text",description:t("components.badge.argTypes.childrenDescription"),table:{type:{summary:"ReactNode"}}},className:{control:"text",description:t("components.badge.argTypes.classNameDescription"),table:{type:{summary:"string"}}}}},a={storyName:t("components.badge.stories.default.title"),args:{children:"1"}},i={storyName:t("components.badge.stories.dotBadge.title"),render:()=>e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(n,{}),e.jsx(n,{outline:!0})]})},r={storyName:t("components.badge.stories.numberBadges.title"),render:()=>e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(n,{children:"1"}),e.jsx(n,{children:"5"}),e.jsx(n,{children:"99"}),e.jsx(n,{children:"99+"}),e.jsx(n,{children:"999"})]})},d={storyName:t("components.badge.stories.numberBadgesWithOutline.title"),render:()=>e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(n,{outline:!0,children:"1"}),e.jsx(n,{outline:!0,children:"5"}),e.jsx(n,{outline:!0,children:"99"}),e.jsx(n,{outline:!0,children:"99+"}),e.jsx(n,{outline:!0,children:"999"})]})},o={storyName:t("components.badge.stories.labelBadges.title"),render:()=>e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(n,{children:"New"}),e.jsx(n,{children:"Hot"}),e.jsx(n,{children:"Sale"}),e.jsx(n,{children:"Featured"})]})},l={storyName:t("components.badge.stories.labelBadgesWithOutline.title"),render:()=>e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(n,{outline:!0,children:"New"}),e.jsx(n,{outline:!0,children:"Hot"}),e.jsx(n,{outline:!0,children:"Sale"}),e.jsx(n,{outline:!0,children:"Featured"})]})},c={storyName:t("components.badge.stories.allVariants.title"),render:()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:"Dot Badges"}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(n,{}),e.jsx(n,{outline:!0})]})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:"Number Badges"}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(n,{children:"1"}),e.jsx(n,{children:"99"}),e.jsx(n,{children:"999"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:"Number Badges (Outline)"}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(n,{outline:!0,children:"1"}),e.jsx(n,{outline:!0,children:"99"}),e.jsx(n,{outline:!0,children:"999"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:"Label Badges"}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(n,{children:"New"}),e.jsx(n,{children:"Hot"}),e.jsx(n,{children:"Sale"})]})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:"Label Badges (Outline)"}),e.jsxs("div",{style:{display:"flex",gap:"16px",alignItems:"center"},children:[e.jsx(n,{outline:!0,children:"New"}),e.jsx(n,{outline:!0,children:"Hot"}),e.jsx(n,{outline:!0,children:"Sale"})]})]})]})},g={storyName:t("components.badge.stories.withBadgeContainer.title"),render:()=>e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"24px"},children:[e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:"Badge on Icon/Button"}),e.jsxs("div",{style:{display:"flex",gap:"24px",alignItems:"center"},children:[e.jsxs(s,{children:[e.jsx("div",{style:{width:"40px",height:"40px",backgroundColor:"#f0f0f0",borderRadius:"8px",display:"flex",alignItems:"center",justifyContent:"center"},children:"🔔"}),e.jsx(n,{children:"5"})]}),e.jsxs(s,{children:[e.jsx("div",{style:{width:"40px",height:"40px",backgroundColor:"#f0f0f0",borderRadius:"8px",display:"flex",alignItems:"center",justifyContent:"center"},children:"📧"}),e.jsx(n,{outline:!0,children:"99+"})]}),e.jsxs(s,{children:[e.jsx("div",{style:{width:"40px",height:"40px",backgroundColor:"#f0f0f0",borderRadius:"8px",display:"flex",alignItems:"center",justifyContent:"center"},children:"⭐"}),e.jsx(n,{})]})]})]}),e.jsxs("div",{children:[e.jsx("h3",{style:{marginBottom:"12px"},children:"Badge on Avatar"}),e.jsxs("div",{style:{display:"flex",gap:"24px",alignItems:"center"},children:[e.jsxs(s,{children:[e.jsx("div",{style:{width:"48px",height:"48px",borderRadius:"50%",backgroundColor:"#4a90e2",display:"flex",alignItems:"center",justifyContent:"center",color:"white",fontWeight:"bold"},children:"JD"}),e.jsx(n,{children:"3"})]}),e.jsxs(s,{children:[e.jsx("div",{style:{width:"48px",height:"48px",borderRadius:"50%",backgroundColor:"#4a90e2",display:"flex",alignItems:"center",justifyContent:"center",color:"white",fontWeight:"bold"},children:"AB"}),e.jsx(n,{outline:!0,children:"New"})]})]})]})]})},p={storyName:t("components.badge.stories.interactive.title"),args:{children:"1",outline:!1}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.badge.stories.default.title'),
+  args: {
+    children: '1'
+  }
+}`,...a.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.badge.stories.dotBadge.title'),
+  render: () => <div style={{
+    display: 'flex',
+    gap: '16px',
+    alignItems: 'center'
+  }}>
+      <Badge />
+      <Badge outline />
+    </div>
+}`,...i.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.badge.stories.numberBadges.title'),
+  render: () => <div style={{
+    display: 'flex',
+    gap: '16px',
+    alignItems: 'center'
+  }}>
+      <Badge>1</Badge>
+      <Badge>5</Badge>
+      <Badge>99</Badge>
+      <Badge>99+</Badge>
+      <Badge>999</Badge>
+    </div>
+}`,...r.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.badge.stories.numberBadgesWithOutline.title'),
+  render: () => <div style={{
+    display: 'flex',
+    gap: '16px',
+    alignItems: 'center'
+  }}>
+      <Badge outline>1</Badge>
+      <Badge outline>5</Badge>
+      <Badge outline>99</Badge>
+      <Badge outline>99+</Badge>
+      <Badge outline>999</Badge>
+    </div>
+}`,...d.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.badge.stories.labelBadges.title'),
+  render: () => <div style={{
+    display: 'flex',
+    gap: '16px',
+    alignItems: 'center'
+  }}>
+      <Badge>New</Badge>
+      <Badge>Hot</Badge>
+      <Badge>Sale</Badge>
+      <Badge>Featured</Badge>
+    </div>
+}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.badge.stories.labelBadgesWithOutline.title'),
+  render: () => <div style={{
+    display: 'flex',
+    gap: '16px',
+    alignItems: 'center'
+  }}>
+      <Badge outline>New</Badge>
+      <Badge outline>Hot</Badge>
+      <Badge outline>Sale</Badge>
+      <Badge outline>Featured</Badge>
+    </div>
+}`,...l.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.badge.stories.allVariants.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px'
+  }}>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>Dot Badges</h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+          <Badge />
+          <Badge outline />
+        </div>
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>Number Badges</h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+          <Badge>1</Badge>
+          <Badge>99</Badge>
+          <Badge>999</Badge>
+        </div>
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>Number Badges (Outline)</h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+          <Badge outline>1</Badge>
+          <Badge outline>99</Badge>
+          <Badge outline>999</Badge>
+        </div>
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>Label Badges</h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+          <Badge>New</Badge>
+          <Badge>Hot</Badge>
+          <Badge>Sale</Badge>
+        </div>
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>Label Badges (Outline)</h3>
+        <div style={{
+        display: 'flex',
+        gap: '16px',
+        alignItems: 'center'
+      }}>
+          <Badge outline>New</Badge>
+          <Badge outline>Hot</Badge>
+          <Badge outline>Sale</Badge>
+        </div>
+      </div>
+    </div>
+}`,...c.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.badge.stories.withBadgeContainer.title'),
+  render: () => <div style={{
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px'
+  }}>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>Badge on Icon/Button</h3>
+        <div style={{
+        display: 'flex',
+        gap: '24px',
+        alignItems: 'center'
+      }}>
+          <BadgeContainer>
+            <div style={{
+            width: '40px',
+            height: '40px',
+            backgroundColor: '#f0f0f0',
+            borderRadius: '8px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}>
+              🔔
+            </div>
+            <Badge>5</Badge>
+          </BadgeContainer>
+          <BadgeContainer>
+            <div style={{
+            width: '40px',
+            height: '40px',
+            backgroundColor: '#f0f0f0',
+            borderRadius: '8px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}>
+              📧
+            </div>
+            <Badge outline>99+</Badge>
+          </BadgeContainer>
+          <BadgeContainer>
+            <div style={{
+            width: '40px',
+            height: '40px',
+            backgroundColor: '#f0f0f0',
+            borderRadius: '8px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}>
+              ⭐
+            </div>
+            <Badge />
+          </BadgeContainer>
+        </div>
+      </div>
+      <div>
+        <h3 style={{
+        marginBottom: '12px'
+      }}>Badge on Avatar</h3>
+        <div style={{
+        display: 'flex',
+        gap: '24px',
+        alignItems: 'center'
+      }}>
+          <BadgeContainer>
+            <div style={{
+            width: '48px',
+            height: '48px',
+            borderRadius: '50%',
+            backgroundColor: '#4a90e2',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontWeight: 'bold'
+          }}>
+              JD
+            </div>
+            <Badge>3</Badge>
+          </BadgeContainer>
+          <BadgeContainer>
+            <div style={{
+            width: '48px',
+            height: '48px',
+            borderRadius: '50%',
+            backgroundColor: '#4a90e2',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontWeight: 'bold'
+          }}>
+              AB
+            </div>
+            <Badge outline>New</Badge>
+          </BadgeContainer>
+        </div>
+      </div>
+    </div>
+}`,...g.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  storyName: t('components.badge.stories.interactive.title'),
+  args: {
+    children: '1',
+    outline: false
+  }
+}`,...p.parameters?.docs?.source}}};const O=["Default","DotBadge","NumberBadges","NumberBadgesWithOutline","LabelBadges","LabelBadgesWithOutline","AllVariants","WithBadgeContainer","Interactive"];export{c as AllVariants,a as Default,i as DotBadge,p as Interactive,o as LabelBadges,l as LabelBadgesWithOutline,r as NumberBadges,d as NumberBadgesWithOutline,g as WithBadgeContainer,O as __namedExportsOrder,W as default};