@usssa/component-library 1.0.0-alpha.4 → 1.0.0-alpha.41

package/src/pages/TabsPage.vue

@@ -0,0 +1,261 @@
+<script setup>
+import { UTabsStd } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+import { computed, ref } from 'vue'
+
+defineOptions({
+  name: 'TabsPage',
+})
+
+const align = ref('Justify')
+const isShowLeftIcon = ref(false)
+const isShowRightIcon = ref(false)
+const isShowOnlyIcon = ref(false)
+const behaviour = ref(true)
+const alignment = computed(() => {
+  return align.value.toLocaleLowerCase()
+})
+
+const htmlContent = `<UTabsStd
+  v-model="selectedTab"
+  :tabs="tabsOptions"
+  :align="align"
+/>`
+
+const contentInfo = `// The 'tabOptions' property allows you to configure tabs for both routing and basic use.
+To enable routing, include a 'route' property in each tab configuration, which links the tab to specific routes.
+For basic tabs, omit the 'route' property. Additionally, the component supports keyboard navigation,
+enabling users to switch between tabs using the left and right arrow keys, ensuring improved accessibility.
+[{name: 'home', label: 'Home', leftIcon: 'home', rightIcon: 'home', route:'home'}]`
+
+const alignmentOptions = ['Justify', 'Left', 'Right']
+const defaultTabs = ref([
+  {
+    name: 'home',
+    label: 'Home',
+    leftIcon: 'fa-kit-duotone fa-home',
+    rightIcon: 'fa-kit-duotone fa-home',
+    route: 'home',
+    disable: false,
+  },
+  {
+    name: 'cart',
+    label: 'Cart',
+    leftIcon: 'fa-kit-duotone fa-cart-shopping',
+    rightIcon: 'fa-kit-duotone fa-cart-shopping',
+    route: 'cart',
+    disable: false,
+  },
+  {
+    name: 'info',
+    label: 'Information',
+    leftIcon: 'fa-kit-duotone fa-circle-exclamation',
+    rightIcon: 'fa-kit-duotone fa-circle-exclamation',
+    route: 'info',
+    disable: true,
+  },
+  {
+    name: 'mail',
+    label: 'Mails',
+    leftIcon: 'fa-kit-duotone fa-envelope',
+    rightIcon: 'fa-kit-duotone fa-envelope',
+    route: 'mail',
+    disable: false,
+  },
+])
+const tabs = computed(() => {
+  return defaultTabs.value.map((tab) => {
+    if (!behaviour.value) {
+      return { ...tab, route: undefined }
+    }
+    return tab
+  })
+})
+
+const isShowBothIcon = computed(() => {
+  return isShowLeftIcon.value && isShowRightIcon.value
+})
+
+const tabsOptions = computed(() => {
+  return tabs.value.map((tab) => {
+    if (isShowOnlyIcon.value) {
+      // Only show the left icon , hide right icon
+      return { ...tab, rightIcon: undefined, label: undefined }
+    }
+
+    if (!isShowLeftIcon.value && !isShowRightIcon.value) {
+      // Show only the label
+      return { ...tab, leftIcon: undefined, rightIcon: undefined }
+    }
+
+    if (!isShowLeftIcon.value) {
+      // Show right icon with label
+      return { ...tab, leftIcon: undefined }
+    }
+
+    if (!isShowRightIcon.value) {
+      // Show left icon with label
+      return { ...tab, rightIcon: undefined }
+    }
+
+    // Show both icons with label
+    return tab
+  })
+})
+
+const handleOnlyIconChange = (value, evt) => {
+  if (value) {
+    isShowLeftIcon.value = true // when it is true only one icon should visible
+    isShowRightIcon.value = false
+  }
+  isShowOnlyIcon.value = value
+}
+
+const handleBothIconChange = (value, evt) => {
+  isShowLeftIcon.value = value
+  isShowRightIcon.value = value
+}
+
+const handleBehaviourChange = (value) => {
+  behaviour.value = value
+}
+
+const updateItem = (index, key, value) => {
+  tabs.value[index][key] = value
+}
+
+const selectedTab = ref('home') // if user don't want to use tabs as route tab then it should be use like this
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-28&t=K9pIC6Ve5iom3wvc-0"
+      cardWidth="70%"
+    >
+      <template v-slot:component>
+        <UTabsStd
+          v-model="selectedTab"
+          :tabs="tabsOptions"
+          :align="alignment"
+        />
+
+        <q-tab-panels
+          class="bg-transparent"
+          v-model="selectedTab"
+          keep-alive
+          animated
+          transition-prev="scale"
+          transition-next="scale"
+        >
+          <q-tab-panel class="text-center" name="home">
+            <q-card class="q-pa-sm">
+              <div class="text-h6">Home</div>
+              This is a example q-tab-panels with animation - Home
+            </q-card>
+          </q-tab-panel>
+          <q-tab-panel class="text-center" name="cart">
+            <q-card class="q-pa-sm">
+              <div class="text-h6">Cart</div>
+              This is a example q-tab-panels with animation - Cart
+            </q-card>
+          </q-tab-panel>
+          <q-tab-panel class="text-center" name="info">
+            <q-card class="q-pa-sm">
+              <div class="text-h6">Info</div>
+              This is a example q-tab-panels with animation - Info
+            </q-card>
+          </q-tab-panel>
+          <q-tab-panel class="text-center" name="mail">
+            <q-card class="q-pa-sm">
+              <div class="text-h6">Mail</div>
+              This is a example q-tab-panels with animation - Mail
+            </q-card>
+          </q-tab-panel>
+        </q-tab-panels>
+      </template>
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg" style="position: relative">
+          <q-toggle
+            color="primary"
+            label="Route Tabs"
+            v-model="behaviour"
+            @update:modelValue="handleBehaviourChange"
+            style="position: absolute; right: 0.5rem; top: -35px"
+          />
+          <q-select
+            v-model="align"
+            :options="alignmentOptions"
+            label="Alignment"
+          />
+          <div class="q-mb-sm">
+            <q-checkbox
+              class="q-mr-sm"
+              size="xs"
+              v-model="isShowOnlyIcon"
+              @update:modelValue="handleOnlyIconChange"
+              label="Only Icon"
+            />
+            <q-checkbox
+              class="q-mr-sm"
+              size="xs"
+              v-model="isShowLeftIcon"
+              label="Left Icon"
+              :disable="isShowOnlyIcon"
+            />
+            <q-checkbox
+              class="q-mr-sm"
+              size="xs"
+              v-model="isShowRightIcon"
+              label="Right Icon"
+              :disable="isShowOnlyIcon"
+            />
+            <q-checkbox
+              class="q-mr-sm"
+              size="xs"
+              :model-value="isShowBothIcon"
+              @update:modelValue="handleBothIconChange"
+              label="Left-Right Icon"
+              :disable="isShowOnlyIcon"
+            />
+          </div>
+          <div v-for="(tab, index) in tabs" :key="tab.name" class="row">
+            <div class="col-12 col-md-2 flex justify-start items-center">
+              <q-checkbox
+                size="xs"
+                @input="updateItem(index, 'disable', tab.disable)"
+                v-model="tab.disable"
+                label="Disable tab"
+              />
+            </div>
+
+            <q-input
+              class="col-12 col-md-3"
+              placeholder="Label"
+              v-model="tab.label"
+              @input="updateItem(index, 'label', tab.label)"
+            ></q-input>
+            <q-input
+              placeholder="Left Icon"
+              class="col-12 col-md-3"
+              v-model="tab.leftIcon"
+              @input="updateItem(index, 'leftIcon', tab.leftIcon)"
+            ></q-input>
+            <q-input
+              placeholder="Right Icon"
+              class="col-12 col-md-4"
+              v-model="tab.rightIcon"
+              @input="updateItem(index, 'rightIcon', tab.rightIcon)"
+            ></q-input>
+          </div>
+        </div>
+      </template>
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+        <pre class="text-neutral-6" style="font-size: 12px; font-weight: 600">{{
+          contentInfo
+        }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/TogglePage.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue'
+import ComponentBase from './ComponentBase.vue'
+import { UToggleStd } from 'src/components'
+
+defineOptions({
+  name: 'TogglePage',
+})
+
+const htmlContent = `<UToggleStd
+  v-model="toggle"
+  id="playground-1"
+  name="toggle-1"
+  :disabled="disabled"
+  :label="label"
+  :checkedIcon="checkedIcon"
+  :unCheckedIcon="unCheckedIcon"
+/>`
+
+const toggle = ref(false)
+const disabled = ref(false)
+const label = ref('Dark Mode')
+const checkedIcon = ref('fa-kit-duotone fa-moon')
+const unCheckedIcon = ref('fa-kit-duotone fa-sun')
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-23&t=HegwRwdR5yoKKzMy-0"
+    >
+      <template v-slot:component>
+        <UToggleStd
+          v-model="toggle"
+          :id="`playground-1`"
+          :name="`toggle-1`"
+          :disabled="disabled"
+          :label="label"
+          :checkedIcon="checkedIcon"
+          :unCheckedIcon="unCheckedIcon"
+        />
+      </template>
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Checked Icon" v-model="checkedIcon" />
+          <q-input label="Unchecked Icon" v-model="unCheckedIcon" />
+          <q-input label="Label" v-model="label" />
+          <q-checkbox size="xs" v-model="disabled" label="Disable" />
+        </div>
+      </template>
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>
+
+<style></style>

package/src/pages/TooltipPage.vue

@@ -0,0 +1,125 @@
+<script setup>
+import { computed, ref } from 'vue'
+import ComponentBase from './ComponentBase.vue'
+import { UTooltip } from 'src/components'
+
+const description = ref('This is a tooltip')
+const icon = ref('fa-kit-duotone fa-circle-info')
+const anchor = ref('top middle')
+const self = ref('bottom middle')
+const show = ref(true)
+const offsetX = ref(14)
+const offsetY = ref(14)
+
+const offset = computed(() => {
+  console.log(offsetX, offsetY)
+  return [parseInt(offsetX.value), parseInt(offsetY.value)]
+})
+
+const anchorOptions = [
+  'top left',
+  'top middle',
+  'top right',
+  'top start',
+  'top end',
+  'center left',
+  'center middle',
+  'center right',
+  'center start',
+  'center end',
+  'bottom left',
+  'bottom middle',
+  'bottom right',
+  'bottom start',
+  'bottom end',
+]
+const selfOptions = [
+  'top left',
+  'top middle',
+  'top right',
+  'top start',
+  'top end',
+  'center left',
+  'center middle',
+  'center right',
+  'center start',
+  'center end',
+  'bottom left',
+  'bottom middle',
+  'bottom right',
+  'bottom start',
+  'bottom end',
+]
+
+const htmlContent = `<UTooltip
+  :description="description"
+  :icon="icon"
+  :anchor="anchor"
+  :self="self"
+  :offset="offset"
+/>
+`
+
+defineOptions({
+  name: 'ToolTip',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=3594-360443&t=gcNLQiqLoeen326d-0"
+    >
+      <template v-slot:component>
+        <q-btn label="Hover">
+          <UTooltip
+            :description="description"
+            :icon="icon"
+            :anchor="anchor"
+            :self="self"
+            :offset="offset"
+          />
+        </q-btn>
+        <UTooltip
+          :description="description"
+          :icon="icon"
+          anchor="center middle"
+          self="center middle"
+          :no-parent-event="true"
+          v-model="show"
+        />
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Description" v-model="description" />
+          <q-input label="Icon" v-model="icon" />
+        </div>
+        <div class="column">
+          <span class="text-grey-8 text-caption-sm q-mt-md">
+            Tooltip Position
+          </span>
+          <div>
+            <q-select
+              v-model="anchor"
+              :options="anchorOptions"
+              label="Anchor Origin"
+            />
+            <q-select
+              v-model="self"
+              :options="selfOptions"
+              label="Self Origin"
+            />
+            <q-input label="Offset X" v-model="offsetX" type="number" />
+            <q-input label="Offset Y" v-model="offsetY" type="number" />
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+        <p>Offset will be an array i.e [14, 14]</p>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/router/index.js

@@ -0,0 +1,34 @@
+import {
+  route
+} from 'quasar/wrappers'
+import {
+  createRouter,
+  createWebHistory,
+} from 'vue-router'
+import routes from './routes'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default route(function ( /* { store, ssrContext } */ ) {
+  const Router = createRouter({
+    scrollBehavior: () => ({
+      left: 0,
+      top: 0
+    }),
+    routes,
+
+    // Leave this as is and make changes in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    history: createWebHistory(process.env.VUE_ROUTER_BASE)
+  })
+
+  return Router
+})

package/src/router/routes.js

@@ -0,0 +1,149 @@
+const routes = [
+  {
+    path: '/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      {
+        path: '',
+        component: () => import('pages/IndexPage.vue'),
+      },
+      {
+        path: 'address-lookup',
+        component: () => import('pages/InputAddressLookup.vue'),
+      },
+      {
+        path: 'advanced-search',
+        component: () => import('src/pages/AdvancedSearch.vue'),
+      },
+      {
+        path: 'avatar',
+        component: () => import('pages/Avatar.vue'),
+      },
+      {
+        path: 'avatar-group',
+        component: () => import('pages/AvatarGroup.vue'),
+      },
+      {
+        path: 'badge',
+        component: () => import('pages/BadgeStd.vue'),
+      },
+      {
+        path: 'button-standard',
+        component: () => import('pages/BtnStd.vue'),
+      },
+      {
+        path: 'button-icon',
+        component: () => import('pages/BtnIcon.vue'),
+      },
+      {
+        path: 'radio-btn',
+        component: () => import('pages/RadioBtn.vue'),
+      },
+      {
+        path: 'check-box',
+        component: () => import('pages/CheckBox.vue'),
+      },
+      {
+        path: 'input-text',
+        component: () => import('pages/InputText.vue'),
+      },
+      {
+        path: 'input-phone',
+        component: () => import('pages/InputPhone.vue'),
+      },
+      {
+        path: 'chip',
+        component: () => import('pages/Chip.vue'),
+      },
+      {
+        path: 'multiselect-standard',
+        component: () => import('pages/MultiSelectStd.vue'),
+      },
+      {
+        path: 'radio',
+        component: () => import('src/pages/Radio.vue'),
+      },
+      {
+        path: 'tabs/:tab',
+        component: () => import('pages/TabsPage.vue'),
+      },
+      {
+        path: 'tab-button',
+        component: () => import('pages/TabButtonPage.vue'),
+      },
+      {
+        path: 'tooltip',
+        component: () => import('src/pages/TooltipPage.vue'),
+      },
+      {
+        path: 'notify',
+        component: () => import('pages/NotifyPage.vue'),
+      },
+      {
+        path: 'banner',
+        component: () => import('pages/BannerPage.vue'),
+      },
+      {
+        path: 'toggle',
+        component: () => import('pages/TogglePage.vue'),
+      },
+      {
+        path: 'select',
+        component: () => import('pages/SelectStd.vue'),
+      },
+      {
+        path: 'table',
+        component: () => import('pages/TablePage.vue'),
+      },
+      {
+        path: 'dialog',
+        component: () => import('pages/Dialog.vue'),
+      },
+      {
+        path: 'pagination',
+        component: () => import('src/pages/Pagination.vue'),
+      },
+      {
+        path: 'button-toggle',
+        component: () => import('pages/BtnToggle.vue'),
+      },
+      {
+        path: 'Drawer',
+        component: () => import('pages/Drawer.vue'),
+      },
+      {
+        path: 'menu-item',
+        component: () => import('src/pages/MenuItem.vue'),
+      },
+      {
+        path: 'inner-loader',
+        component: () => import('src/pages/InnerLoader.vue'),
+      },
+      {
+        path: 'menu-dropdown',
+        component: () => import('src/pages/MenuDropdown.vue'),
+      },
+      {
+        path: 'menu-button',
+        component: () => import('src/pages/MenuButton.vue'),
+      },
+      {
+        path: 'bread-crumbs',
+        component: () => import('src/pages/BreadCrumbs.vue'),
+      },
+      {
+        path: 'overlay-loader',
+        component: () => import('src/pages/OverlayLoader.vue'),
+      },
+    ],
+  },
+
+  // Always leave this as last one,
+  // but you can also remove it
+  {
+    path: '/:catchAll(.*)*',
+    component: () => import('pages/ErrorNotFound.vue'),
+  },
+]
+
+export default routes

package/dist/spa/assets/Avatar.45667392.js

@@ -1,9 +0,0 @@
-import{Q as p,_ as g}from"./ComponentBase.1ae19b7e.js";import{Q as c}from"./QSelect.a40eb786.js";import{Q as v}from"./QCheckbox.48b43f7d.js";import{Q as w}from"./QPage.ca395ec4.js";import{_ as x}from"./UAvatar.dda7e478.js";import{r as l,F as C,G as I,H as n,I as a,U as t,N as U}from"./index.43c62a18.js";import"./dom.e9d4ad51.js";import"./render.e67ff27a.js";import"./format.41663636.js";import"./use-checkbox.44a623c0.js";import"./option-sizes.10cc02d3.js";import"./QAvatar.5940a79e.js";import"./UBadgeStd.e165ee05.js";const _={class:"column q-gutter-y-lg"},b={class:"column"},z=t("span",{class:"text-grey-8 text-caption-sm"},"Show Indicator",-1),Q=`<UAvatar
-  ref="avatar"
-  :name="name"
-  :size="size"
-  :showIndicator="showIndicator"
-  :indicatorColor="indicatorColor"
-  :round="round"
-  :image="image"
-  />`,H=Object.assign({name:"UAvatar"},{__name:"Avatar",setup(S){l("label");const r=l(!0),s=l("A"),i=l(""),m=l(""),u=l("sm"),V=["primary","accent","positive","neutral"],f=["sm","md","lg","xl"],d=l(!0);return(y,e)=>(C(),I(w,{class:"flex flex-center"},{default:n(()=>[a(g,{figmaUrl:"https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2246-39909"},{component:n(()=>[a(x,{ref:"avatar",name:s.value,size:u.value,showIndicator:d.value,indicatorColor:i.value,round:r.value,image:m.value},null,8,["name","size","showIndicator","indicatorColor","round","image"])]),properties:n(()=>[t("div",_,[a(p,{label:"Name",modelValue:s.value,"onUpdate:modelValue":e[0]||(e[0]=o=>s.value=o)},null,8,["modelValue"]),a(p,{label:"image",modelValue:m.value,"onUpdate:modelValue":e[1]||(e[1]=o=>m.value=o)},null,8,["modelValue"]),a(c,{modelValue:u.value,"onUpdate:modelValue":e[2]||(e[2]=o=>u.value=o),options:f,label:"Size"},null,8,["modelValue"]),t("div",b,[z,a(v,{size:"xs",modelValue:d.value,"onUpdate:modelValue":e[3]||(e[3]=o=>d.value=o),val:!0,label:"Show Indicator"},null,8,["modelValue"])]),t("div",null,[a(v,{size:"xs",modelValue:r.value,"onUpdate:modelValue":e[4]||(e[4]=o=>r.value=o),val:!0,label:"Round"},null,8,["modelValue"])]),a(c,{modelValue:i.value,"onUpdate:modelValue":e[5]||(e[5]=o=>i.value=o),options:V,label:"Indicator Color"},null,8,["modelValue"])])]),code:n(()=>[t("pre",null,U(Q))]),_:1})]),_:1}))}});export{H as default};

package/dist/spa/assets/AvatarGroup.99557443.js

@@ -1,9 +0,0 @@
-import{f as b,Q as w,_ as S}from"./ComponentBase.1ae19b7e.js";import{Q as U}from"./QSelect.a40eb786.js";import{Q as q}from"./QCheckbox.48b43f7d.js";import{Q as j}from"./QPage.ca395ec4.js";import{_ as L}from"./UTooltip.d2e04d0c.js";import{_ as Q}from"./UAvatar.dda7e478.js";import{a as A,F as r,K as d,M as _,L as z,G as k,H as c,I as a,U as t,J as B,N as I,aa as G,a9 as $,r as m}from"./index.43c62a18.js";import"./dom.e9d4ad51.js";import"./render.e67ff27a.js";import"./format.41663636.js";import"./use-checkbox.44a623c0.js";import"./option-sizes.10cc02d3.js";import"./QTooltip.5aa8e325.js";import"./QAvatar.5940a79e.js";import"./UBadgeStd.e165ee05.js";const F={class:"text-body-xs tooltip-text"},N=t("br",null,null,-1),x={__name:"UAvatarGroup",props:{color:{type:String,default:"primary"},icon:{type:String},size:{type:String},image:{type:String},images:{type:Array},indicatorColor:{type:String,default:"neutral-4"},name:{type:String,required:!0},showIndicator:{type:Boolean,default:!1},round:{type:Boolean,default:!0},avatarLimit:{type:Number,default:4}},emits:["onClick"],setup(o,{emit:C}){const n=o,p=C,v=()=>p("onClick"),V=A(()=>n.images.slice(0,n.avatarLimit)),g=A(()=>n.images.slice(n.avatarLimit));return(f,h)=>(r(),d(_,null,[(r(!0),d(_,null,z(V.value,(u,e)=>(r(),k(Q,{class:"avatarGroup",name:u.name,size:o.size,showIndicator:o.showIndicator,indicatorColor:o.indicatorColor,round:o.round,image:u.image,key:e,onClick:v},null,8,["name","size","showIndicator","indicatorColor","round","image"]))),128)),g.value.length?(r(),k(b,{key:0,class:G(`avatarGroup additonalUsersAvatar size-${o.size} fa-duotone fa-solid fa-circle-plus`),color:"primary","aria-label":"See more Avatar"},{default:c(()=>[a(L,{anchor:"bottom middle",description:"",self:"top middle",offset:[4,4]},{item:c(()=>[t("div",F,[(r(!0),d(_,null,z(g.value,(u,e)=>(r(),d("span",{key:e},[B(I(u.name),1),N]))),128))])]),_:1})]),_:1},8,["class"])):$("",!0)],64))}},D={class:"column q-gutter-y-lg"},O={class:"text-grey-8 text-caption-sm"},T={class:"full-width row justify-end q-mt-xs",style:{cursor:"pointer"}},E={class:"full-width row justify-end q-mt-sm"},H={class:"column q-gutter-y-lg"},J={class:"column q-gutter-y-lg"},K={class:"column"},M=t("span",{class:"text-grey-8 text-caption-sm"},"Show Indicator",-1),P={data(){return{users:[{name:"Alice",image:"https://cdn.quasar.dev/img/avatar1.jpg"},{name:"Bob",image:"https://cdn.quasar.dev/img/avatar2.jpg"},{name:"Charlie",image:"https://cdn.quasar.dev/img/avatar3.jpg"},{name:"Diana",image:"https://cdn.quasar.dev/img/avatar4.jpg"},{name:"Edward",image:"https://cdn.quasar.dev/img/avatar5.jpg"},{name:"Alex",image:"https://cdn.quasar.dev/img/avatar6.jpg"}]}},methods:{addField(){this.users.push({name:"",image:""})},removeField(o){this.users.splice(o,1)}}},me=Object.assign(P,{name:"UAvatarGroup"},{__name:"AvatarGroup",setup(o){const C=m(!0),n=m("A"),p=m(""),v=m("xl"),V=["primary","accent","positive","neutral"],g=["sm","md","lg","xl"],f=m(!0),h=m(4),u=`<UAvatarGroup
-  ref="avatar"
-  :label="label"
-  :size="size"
-  :showIndicator="showIndicator"
-  :indicatorColor="indicatorColor"
-  :round="round"
-  :images="users"
-  />`;return(e,s)=>(r(),k(j,{class:"flex flex-center"},{default:c(()=>[a(S,{figmaUrl:"https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2246-39909"},{component:c(()=>[a(x,{ref:"avatar",label:n.value,size:v.value,showIndicator:f.value,indicatorColor:p.value,round:C.value,images:e.users,avatarLimit:h.value},null,8,["label","size","showIndicator","indicatorColor","round","images","avatarLimit"])]),properties:c(()=>[t("div",D,[(r(!0),d(_,null,z(e.users,(l,i)=>(r(),d("div",{key:i},[t("span",O,"User "+I(i+1),1),a(w,{modelValue:e.users[i].name,"onUpdate:modelValue":y=>e.users[i].name=y,val:e.users[i].name,label:"Name"},null,8,["modelValue","onUpdate:modelValue","val"]),a(w,{modelValue:e.users[i].image,"onUpdate:modelValue":y=>e.users[i].image=y,val:l.image,label:"Image"},null,8,["modelValue","onUpdate:modelValue","val"]),t("div",T,[a(b,{onClick:y=>e.removeField(i),class:"fa-duotone fa-solid fa-circle-minus",size:"sm",color:"primary"},null,8,["onClick"])])]))),128)),t("div",E,[a(b,{onClick:e.addField,style:{cursor:"pointer"},class:"fa-duotone fa-solid fa-circle-plus",size:"xl",color:"primary"},null,8,["onClick"])])]),t("div",H,[a(w,{modelValue:h.value,"onUpdate:modelValue":s[0]||(s[0]=l=>h.value=l),label:"Avatar Limit"},null,8,["modelValue"])]),t("div",J,[a(U,{modelValue:v.value,"onUpdate:modelValue":s[1]||(s[1]=l=>v.value=l),options:g,label:"Size"},null,8,["modelValue"])]),t("div",K,[M,a(q,{size:"xs",modelValue:f.value,"onUpdate:modelValue":s[2]||(s[2]=l=>f.value=l),val:!0,label:"Show Indicator"},null,8,["modelValue"])]),a(U,{modelValue:p.value,"onUpdate:modelValue":s[3]||(s[3]=l=>p.value=l),options:V,label:"Indicator Color"},null,8,["modelValue"])]),code:c(()=>[t("pre",null,I(u))]),_:1})]),_:1}))}});export{me as default};

package/dist/spa/assets/AvatarGroup.bb4cd03a.css

@@ -1 +0,0 @@
-.additonalUsersAvatar:after{background-color:#e1e9f9;border-radius:50%}.additonalUsersAvatar{cursor:pointer}.additonalUsersAvatar.size-sm{font-size:1rem!important}.additonalUsersAvatar.size-md{font-size:1.5rem!important}.additonalUsersAvatar.size-lg{font-size:2rem!important}.additonalUsersAvatar.size-xl{font-size:2.5rem!important}.avatarGroup{margin:-.125rem}.avatarGroup:not(:nth-child(1)) .q-avatar__content{border:1.5px solid #FFFFFF;background:lightgray 0px -.033px/100% 150.273% no-repeat}

package/dist/spa/assets/BadgeStd.ee4129c5.js

@@ -1,6 +0,0 @@
-import{Q as g,_ as b}from"./ComponentBase.1ae19b7e.js";import{Q as p}from"./QSelect.a40eb786.js";import{Q as c}from"./QRadio.0a7f5e2c.js";import{Q as x}from"./QPage.ca395ec4.js";import{_ as y}from"./UBadgeStd.e165ee05.js";import{r,w as B,a as Q,E as S,F as U,G as q,H as t,I as o,U as s,J as v,N as w}from"./index.43c62a18.js";import"./dom.e9d4ad51.js";import"./render.e67ff27a.js";import"./format.41663636.js";import"./option-sizes.10cc02d3.js";const z={class:"column q-gutter-y-lg"},C={class:"container column"},T={class:"q-gutter-sm"},D={class:"q-mt-md"},N=`<UBadgeStd
-  :label="label"
-  :color="color"
-  :size="size"
-  :type="type"
-/>`,G=Object.assign({name:"BtnStd"},{__name:"BadgeStd",setup(O){const i=r("primary"),f=["primary","accent","warning","positive","neutral"],n=r("md"),a=r("basic"),V=["xxs","xs","sm","md","lg"];B(a,()=>{n.value=a.value==="indicator"?"xxs":"md"});const _=Q(()=>a.value==="indicator"?V.filter(m=>m!=="md"&&m!=="lg"):["md","lg"]),d=r("01");return(m,e)=>{const u=S("q-label");return U(),q(x,{class:"flex flex-center"},{default:t(()=>[o(b,{figmaUrl:"https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=508-19370&t=DR7gF8DTYY1JvngY-0"},{component:t(()=>[o(y,{label:d.value,color:i.value,size:n.value,type:a.value},null,8,["label","color","size","type"])]),properties:t(()=>[s("div",z,[s("div",C,[s("div",T,[s("div",D,[o(u,null,{default:t(()=>[v("Label")]),_:1}),o(g,{modelValue:d.value,"onUpdate:modelValue":e[0]||(e[0]=l=>d.value=l)},null,8,["modelValue"])]),o(p,{modelValue:i.value,"onUpdate:modelValue":e[1]||(e[1]=l=>i.value=l),options:f,label:"Color"},null,8,["modelValue"]),o(p,{modelValue:n.value,"onUpdate:modelValue":e[2]||(e[2]=l=>n.value=l),options:_.value,label:"Size"},null,8,["modelValue","options"]),s("div",null,[o(u,{class:"q-mr-sm"},{default:t(()=>[v("Type")]),_:1}),o(c,{dense:"",modelValue:a.value,"onUpdate:modelValue":e[3]||(e[3]=l=>a.value=l),val:"basic",label:"Basic",class:"q-pr-sm"},null,8,["modelValue"]),o(c,{dense:"",modelValue:a.value,"onUpdate:modelValue":e[4]||(e[4]=l=>a.value=l),val:"indicator",label:"Indicator"},null,8,["modelValue"])])])])])]),code:t(()=>[s("pre",null,w(N))]),_:1})]),_:1})}}});export{G as default};