https://ui.vuestic.dev/_nuxt/M9o-vJyt.js

1import{a as x,d as h,b as r}from"./ClgQXMoz.js";import{_ as i,o as c,c as u,b as s,aF as a,O as b,a as o,w as g,d as f,t as V}from"./B4ZmscOv.js";import{c as C}from"./CjfaRa8u.js";import"./oNHrlTz8.js";import"./CRsmbMAM.js";import"./zbKDdeN3.js";import"./JqdTGXnT.js";import"./OTYkPJ3m.js";import"./dc7ZrG7M.js";import"./5D6EczKd.js";import"./CbR3AgpV.js";import"./Ij7l6LAn.js";import"./Dxih5veI.js";const k={data(){return{value:65}}},P={class:"flex flex-col gap-3"};function z(p,e,t,m,l,v){const n=a,_=C;return c(),u("div",P,[s(n,{modelValue:l.value,"onUpdate:modelValue":e[0]||(e[0]=d=>l.value=d)},null,8,["modelValue"]),s(_,{modelValue:l.value,"onUpdate:modelValue":e[1]||(e[1]=d=>l.value=d),"track-label":d=>`${d}%`,"track-label-visible":""},null,8,["modelValue","track-label"])])}const $=i(k,[["render",z]]),y=`<template>
2  <div class="flex flex-col gap-3">
3    <VaProgressCircle v-model="value" />
4
5    <VaSlider
6      v-model="value"
7      :track-label="(v) => \`\${v}%\`"
8      track-label-visible
9    />
10  </div>
11</template>
12
13<script>
14export default {
15  data() {
16    return {
17      value: 65,
18    };
19  },
20};
21<\/script>
22`,A={};function S(p,e){const t=a;return c(),b(t,{indeterminate:""})}const w=i(A,[["render",S]]),U=`<template>
23  <VaProgressCircle indeterminate />
24</template>
25`,I={},T={class:"flex flex-col gap-3"};function D(p,e){const t=a;return c(),u("div",T,[s(t,{"model-value":65,color:"danger"}),s(t,{"model-value":85,color:"#a1a1a1"})])}const R=i(I,[["render",D]]),B=`<template>
26  <div class="flex flex-col gap-3">
27    <VaProgressCircle
28      :model-value="65"
29      color="danger"
30    />
31    <VaProgressCircle
32      :model-value="85"
33      color="#a1a1a1"
34    />
35  </div>
36</template>
37`,W={data(){return{value:65}}},N={class:"flex flex-col gap-3"};function O(p,e,t,m,l,v){const n=a;return c(),u("div",N,[e[0]||(e[0]=o("div",null,"small",-1)),s(n,{size:"small","model-value":l.value},null,8,["model-value"]),e[1]||(e[1]=o("div",null,"large",-1)),s(n,{size:"large","model-value":l.value},null,8,["model-value"]),e[2]||(e[2]=o("div",null,"25px",-1)),s(n,{size:25,"model-value":l.value},null,8,["model-value"]),e[3]||(e[3]=o("div",null,"2rem",-1)),s(n,{size:"2rem","model-value":l.value},null,8,["model-value"])])}const E=i(W,[["render",O]]),j=`<template>
38  <div class="flex flex-col gap-3">
39    <div>small</div>
40    <VaProgressCircle
41      size="small"
42      :model-value="value"
43    />
44
45    <div>large</div>
46    <VaProgressCircle
47      size="large"
48      :model-value="value"
49    />
50
51    <div>25px</div>
52    <VaProgressCircle
53      :size="25"
54      :model-value="value"
55    />
56
57    <div>2rem</div>
58    <VaProgressCircle
59      size="2rem"
60      :model-value="value"
61    />
62  </div>
63</template>
64
65<script>
66export default {
67  data() {
68    return {
69      value: 65,
70    };
71  },
72};
73<\/script>
74`,F={data(){return{value:65}}},L={class:"flex flex-col gap-2"};function M(p,e,t,m,l,v){const n=a;return c(),u("div",L,[s(n,{"model-value":l.value},{default:g(()=>[f(V(l.value+"%"),1)]),_:1},8,["model-value"]),s(n,{indeterminate:""},{default:g(()=>e[0]||(e[0]=[f(" ... ")])),_:1})])}const q=i(F,[["render",M]]),G=`<template>
75  <div class="flex flex-col gap-2">
76    <VaProgressCircle :model-value="value">
77      {{ value + "%" }}
78    </VaProgressCircle>
79    <VaProgressCircle indeterminate>
80      ...
81    </VaProgressCircle>
82  </div>
83</template>
84
85<script>
86export default {
87  data() {
88    return {
89      value: 65,
90    };
91  },
92};
93<\/script>
94`,H={data(){return{value:35}}},J={class:"flex flex-col gap-3"};function K(p,e,t,m,l,v){const n=a;return c(),u("div",J,[e[0]||(e[0]=o("div",null,"0.1",-1)),s(n,{thickness:.1,"model-value":l.value},null,8,["model-value"]),e[1]||(e[1]=o("div",null,"0.6",-1)),s(n,{thickness:.6,"model-value":l.value},null,8,["model-value"]),e[2]||(e[2]=o("div",null,"0.6 + intermediate",-1)),s(n,{thickness:.6,indeterminate:""})])}const Q=i(H,[["render",K]]),X=`<template>
95  <div class="flex flex-col gap-3">
96    <div>0.1</div>
97    <VaProgressCircle
98      :thickness="0.1"
99      :model-value="value"
100    />
101
102    <div>0.6</div>
103    <VaProgressCircle
104      :thickness="0.6"
105      :model-value="value"
106    />
107
108    <div>0.6 + intermediate</div>
109    <VaProgressCircle
110      :thickness="0.6"
111      indeterminate
112    />
113  </div>
114</template>
115
116<script>
117export default {
118  data() {
119    return {
120      value: 35,
121    };
122  },
123};
124<\/script>

125`,Y=x({slots:{default:{}}}),ue=h({blocks:[r.title("Progress Circle"),r.paragraph("The `va-progress-circle` component is used to display an indicator of an app loading content. Also check the [va-progress-bar](/ui-elements/progress-bar) component."),r.subtitle("Examples"),r.example($,y,"page-config/ui-elements/progress-circle/examples/Default.vue",{title:"Default",description:"By default, the `va-progress-circle` displays a circular progress bar. Use the `value` prop to control the progress."}),r.example(w,U,"page-config/ui-elements/progress-circle/examples/Indeterminate.vue",{title:"Indeterminate",description:"Use the `indeterminate` prop so that the `va-progress-circle` continuously animates."}),r.example(R,B,"page-config/ui-elements/progress-circle/examples/Coloring.vue",{title:"Coloring",description:"Use predefined colors or use your own with the `color` prop."}),r.example(E,j,"page-config/ui-elements/progress-circle/examples/Sizing.vue",{title:"Sizing",description:"Use predefined sizes or use your own with the `size` prop."}),r.example(q,G,"page-config/ui-elements/progress-circle/examples/Slots.vue",{title:"Slots",description:"There is also the default `slot` if you want to display some additional info about the progress."}),r.example(Q,X,"page-config/ui-elements/progress-circle/examples/Thickness.vue",{title:"Thickness",description:"Use the `thickness` prop to adjust the stroke size."}),r.subtitle("Accessibility"),r.paragraph("The [role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)[[target=_blank]] of the component is [progressbar](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/progressbar_role)[[target=_blank]], the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)[[target=_blank]] of the component is `progress state`, if the value of the component is not indeterminate, [aria-valuenow](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuenow)[[target=_blank]] is set to the `modelValue` prop."),r.subt

125itle("API"),r.api("VaProgressCircle",a,[["--va-progress-circle-position"," relative","Circle"],["--va-progress-circle-overflow"," hidden",""],["--va-progress-circle-width"," 80%","Circle Wrapper"],["--va-progress-circle-height"," 80%",""],["--va-progress-circle-overlay-transition"," all ease 2s","Circle Overlay"],["--va-progress-circle-font-size"," 0.75rem","Circle Info"]],[],{props:{value:"The progress value",indeterminate:"Using the `indeterminate` prop, the `va-progress-circle` continues to  animate indefinitely.",thickness:"Circle border size between 0 and 1",ariaLabel:"The aria-label of the component"},slots:{default:"Display any additional info about the progress"}},Y)]});export{ue as default};