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

package/src/pages/AvatarGroup.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { UAvatarGroup } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+import { ref } from 'vue'
+
+const round = ref(true)
+const label = ref('A')
+const indicatorColor = ref('')
+
+const size = ref('xl')
+const indicatorColorOptions = ['primary', 'accent', 'positive', 'neutral']
+const sizeOptions = ['sm', 'md', 'lg', 'xl']
+const showIndicator = ref(true)
+const avatarLimit = ref(4)
+
+const htmlContent = `<UAvatarGroup
+  ref="avatar"
+  :label="label"
+  :size="size"
+  :showIndicator="showIndicator"
+  :indicatorColor="indicatorColor"
+  :round="round"
+  :images="users"
+  />`
+
+defineOptions({
+  name: 'UAvatarGroup',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2246-39909"
+    >
+      <template v-slot:component>
+        <UAvatarGroup
+          ref="avatar"
+          :label="label"
+          :size="size"
+          :showIndicator="showIndicator"
+          :indicatorColor="indicatorColor"
+          :round="round"
+          :images="users"
+          :avatarLimit="avatarLimit"
+        />
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <div v-for="(item, index) in users" :key="index">
+            <span class="text-grey-8 text-caption-sm"
+              >User {{ index + 1 }}</span
+            >
+
+            <q-input
+              v-model="users[index].name"
+              :val="users[index].name"
+              label="Name"
+            ></q-input>
+            <q-input
+              v-model="users[index].image"
+              :val="item.image"
+              label="Image"
+            ></q-input>
+            <div
+              class="full-width row justify-end q-mt-xs"
+              style="cursor: pointer"
+            >
+              <q-icon
+                @click="removeField(index)"
+                class="fa-duotone fa-solid fa-circle-minus"
+                size="sm"
+                color="primary"
+              />
+            </div>
+          </div>
+          <div class="full-width row justify-end q-mt-sm">
+            <q-icon
+              @click="addField"
+              style="cursor: pointer"
+              class="fa-duotone fa-solid fa-circle-plus"
+              size="xl"
+              color="primary"
+            />
+          </div>
+        </div>
+        <div class="column q-gutter-y-lg">
+          <q-input v-model="avatarLimit" label="Avatar Limit" />
+        </div>
+        <div class="column q-gutter-y-lg">
+          <q-select v-model="size" :options="sizeOptions" label="Size" />
+        </div>
+        <div class="column">
+          <span class="text-grey-8 text-caption-sm">Show Indicator</span>
+          <q-checkbox
+            size="xs"
+            v-model="showIndicator"
+            :val="true"
+            label="Show Indicator"
+          />
+        </div>
+        <q-select
+          v-model="indicatorColor"
+          :options="indicatorColorOptions"
+          label="Indicator Color"
+        />
+      </template>
+
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>
+<script>
+export default {
+  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(index) {
+      this.users.splice(index, 1)
+    },
+  },
+}
+</script>

package/src/pages/BadgeStd.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+import ComponentBase from './ComponentBase.vue'
+import { UBadgeStd } from 'src/components'
+
+const color = ref('primary')
+const colorOptions = ['primary', 'accent', 'warning', 'positive', 'neutral']
+
+const size = ref('md')
+const type = ref('basic')
+const sizeOptions = ['xxs', 'xs', 'sm', 'md', 'lg']
+watch(type, () => {
+  size.value = type.value === 'indicator' ? 'xxs' : 'md'
+})
+const filteredSizeOptions = computed(() => {
+  if (type.value === 'indicator') {
+    return sizeOptions.filter((size) => size !== 'md' && size !== 'lg')
+  }
+  return ['md', 'lg']
+})
+const label = ref('01')
+const htmlContent = `<UBadgeStd
+  :label="label"
+  :color="color"
+  :size="size"
+  :type="type"
+/>`
+defineOptions({
+  name: 'BtnStd',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=508-19370&t=DR7gF8DTYY1JvngY-0"
+    >
+      <template v-slot:component>
+        <UBadgeStd :label="label" :color="color" :size="size" :type="type" />
+      </template>
+
+      <template v-slot:properties
+        ><div class="column q-gutter-y-lg">
+          <div class="container column">
+            <div class="q-gutter-sm">
+              <div class="q-mt-md">
+                <q-label>Label</q-label>
+                <q-input v-model="label"></q-input>
+              </div>
+              <q-select v-model="color" :options="colorOptions" label="Color" />
+              <q-select
+                v-model="size"
+                :options="filteredSizeOptions"
+                label="Size"
+              />
+              <div>
+                <q-label class="q-mr-sm">Type</q-label>
+
+                <q-radio
+                  dense
+                  v-model="type"
+                  val="basic"
+                  label="Basic"
+                  class="q-pr-sm"
+                />
+                <q-radio
+                  dense
+                  v-model="type"
+                  val="indicator"
+                  label="Indicator"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/BannerPage.vue

@@ -0,0 +1,76 @@
+<script setup>
+import { ref } from 'vue'
+import ComponentBase from './ComponentBase.vue'
+import { UBannerStd } from 'src/components'
+
+defineOptions({
+  name: 'BannerPage',
+})
+
+const htmlContent = `<UBannerStd
+  :type="type"
+  :show="show"
+  :primaryActionLabel="primaryActionLabel"
+  :secondaryActionLabel="secondaryActionLabel"
+  :message="message"
+  @primaryAction="handlePrimaryActionClick"
+  @secondaryAction="handleSecondaryActionClick"
+  :icon="icon"
+/>`
+
+const typeOptions = ['info', 'positive', 'accent', 'warning', 'primary']
+
+const type = ref('primary')
+const message = ref('This is banner message.')
+const icon = ref('fa-kit-duotone fa-circle-info')
+const primaryActionLabel = ref('Submit')
+const secondaryActionLabel = ref('Close')
+const show = ref(true)
+
+const handlePrimaryActionClick = () => {
+  alert('First Clicked')
+}
+
+const handleSecondaryActionClick = () => {
+  alert('Second Clicked')
+}
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2145-13266&m=dev"
+      cardWidth="70%"
+    >
+      <template v-slot:component>
+        <UBannerStd
+          :type="type"
+          :show="show"
+          :primaryActionLabel="primaryActionLabel"
+          :secondaryActionLabel="secondaryActionLabel"
+          :message="message"
+          @primaryAction="handlePrimaryActionClick"
+          @secondaryAction="handleSecondaryActionClick"
+          :icon="icon"
+        />
+      </template>
+      <template v-slot:properties>
+        <div class="column q-gutter-y-md">
+          <q-toggle v-model="show" label="Show" />
+          <q-input label="Message" v-model="message" />
+          <q-input label="Icon" v-model="icon" />
+          <q-select v-model="type" :options="typeOptions" label="Type" />
+          <q-input label="Primary Action label" v-model="primaryActionLabel" />
+          <q-input
+            label="Secondary Action label"
+            v-model="secondaryActionLabel"
+          />
+        </div>
+      </template>
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>
+<style lang="sass"></style>

package/src/pages/BreadCrumbs.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { UBreadCrumbs } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+import { ref } from 'vue'
+
+const htmlContent = `<UBreadCrumbs
+  :align="align"
+  :links="links"
+  :clickable="clickable"
+  :showActiveRoute="showActiveRoute"
+  :activeColor="activeColor"
+  />
+`
+
+const contentInfo = `The links options should look like [
+  {
+    label: 'Banner', // label of bread crumb
+    to: 'banner', // redirect link
+  },`
+
+const align = ref('left')
+const activeColor = ref('primary')
+const clickable = ref(true)
+const showActiveRoute = ref(true)
+const alignmentOptions = ['left', 'right', 'center', 'between', 'around']
+const links = [
+  { label: 'Avatar', to: 'avatar' },
+  {
+    label: 'Badge',
+    to: 'badge',
+  },
+  {
+    label: 'Banner',
+    to: 'banner',
+  },
+  {
+    label: 'Button Toggle',
+    to: 'button-toggle',
+  },
+  {
+    label: 'Button',
+    to: 'button-standard',
+  },
+  {
+    label: 'Bread Crumbs',
+    to: 'bread-crumbs',
+  },
+]
+</script>
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-17&node-type=canvas&m=dev"
+      cardWidth="70%"
+    >
+      <template v-slot:component>
+        <UBreadCrumbs
+          :align="align"
+          :links="links"
+          :clickable="clickable"
+          :showActiveRoute="showActiveRoute"
+          :activeColor="activeColor"
+        />
+      </template>
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg" style="position: relative">
+          <q-select
+            v-model="align"
+            :options="alignmentOptions"
+            label="Alignment"
+          />
+          <q-checkbox
+            class="q-mr-sm"
+            size="xs"
+            v-model="clickable"
+            label="Clickable"
+          />
+          <q-checkbox
+            class="q-mr-sm"
+            size="xs"
+            v-model="showActiveRoute"
+            label="Show current active route"
+          />
+          <q-input
+            class="col-12 col-md-3"
+            placeholder="Label"
+            v-model="activeColor"
+          ></q-input>
+        </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>
+<style lang="sass"></style>

package/src/pages/BtnIcon.vue

@@ -0,0 +1,120 @@
+<script setup>
+import { UBtnIcon } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+import { ref } from 'vue'
+
+const color = ref('primary')
+const colorOptions = ['primary', 'neutral', 'accent', 'transparent']
+
+const tooltip = ref('Tooltip')
+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 ariaLabel = ref('Btn Icon')
+const size = ref('sm')
+const sizeOptions = ['sm', 'md', 'lg']
+const anchor = ref('center left')
+const self = ref('center end')
+
+const iconClass = ref('fa-kit-duotone fa-circle-bolt')
+
+const htmlContent = `<UBtnIcon
+   ref="btn-icon"
+  :size="size"
+  :ariaLabel="ariaLabel"
+  :color="color"
+  :iconClass="iconClass"
+  :tooltip="tooltip"
+  :anchor="anchor"
+  :self="self"
+  />`
+
+defineOptions({
+  name: 'BtnIcon',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2710-35247"
+    >
+      <template v-slot:component>
+        <UBtnIcon
+          ref="btn-icon"
+          :size="size"
+          :ariaLabel="ariaLabel"
+          :color="color"
+          :iconClass="iconClass"
+          :tooltip="tooltip"
+          :anchor="anchor"
+          :self="self"
+        />
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Aria Label" v-model="ariaLabel"></q-input>
+          <q-select v-model="color" :options="colorOptions" label="Color" />
+          <q-input label="Icon Class" v-model="iconClass"></q-input>
+          <q-select v-model="size" :options="sizeOptions" label="Icon Size" />
+
+          <div class="q-my-md">
+            <q-input v-model="tooltip" label="Tooltip"></q-input>
+          </div>
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Tooltip Position</span>
+            <div>
+              <q-select
+                v-model="anchor"
+                :options="anchorOptions"
+                label="Anchor Origin"
+              />
+              <q-select
+                v-model="self"
+                :options="selfOptions"
+                label="Self Origin"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/BtnStd.vue

@@ -0,0 +1,138 @@
+<script setup>
+import { UTooltip } from 'src/components'
+import { computed, ref } from 'vue'
+import UBtnStd from '../components/core/UBtnStd.vue'
+import ComponentBase from './ComponentBase.vue'
+
+const color = ref('primary')
+const colorOptions = [
+  'positive',
+  'info',
+  'warning',
+  'neutral',
+  'primary',
+  'accent',
+]
+
+const size = ref('sm')
+const sizeOptions = ['sm', 'md', 'lg']
+const disabled = ref(false)
+const type = ref('standard')
+const label = ref('Button')
+const tooltip = ref(null)
+
+const flat = computed(() => {
+  return type.value === 'flat'
+})
+const outline = computed(() => {
+  return type.value === 'outline'
+})
+
+const leftIcon = computed(() => {
+  return iconLeft.value ? 'fa-kit-duotone fa-triangle-exclamation' : ''
+})
+const rightIcon = computed(() => {
+  return iconRight.value ? 'fa-kit-duotone fa-triangle-exclamation' : ''
+})
+
+const iconLeft = ref(false)
+const iconRight = ref(false)
+const fullWidth = ref(false)
+const htmlContent =
+  '<UBtnStd\n :size="size"\n :label="label"\n :color="color"\n :outline="outline"\n :disable="disabled"\n :flat="flat"\n :left-icon="leftIcon"\n :right-icon="rightIcon"\n :full-width="fullWidth"\n/> '
+
+defineOptions({
+  name: 'BtnStd',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-18&t=W9U6NqDHbuiUvAxN-0"
+    >
+      <template v-slot:component>
+        <u-btn-std
+          ref="btn"
+          :size="size"
+          :label="label"
+          :color="color"
+          :outline="outline"
+          :disable="disabled"
+          :flat="flat"
+          :left-icon="leftIcon"
+          :right-icon="rightIcon"
+          :full-width="fullWidth"
+        >
+          <template v-slot:tooltip>
+            <UTooltip
+              v-if="tooltip"
+              :description="tooltip"
+              anchor="bottom middle"
+              self="bottom middle"
+              :offset="[14, 40]"
+            />
+          </template>
+        </u-btn-std>
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Label" v-model="label" />
+          <q-input label="Button tooltip" v-model="tooltip" />
+          <q-select v-model="color" :options="colorOptions" label="Color" />
+          <q-select v-model="size" :options="sizeOptions" label="Size" />
+
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Type</span>
+            <div>
+              <q-radio
+                dense
+                v-model="type"
+                val="standard"
+                label="Default/Standard"
+              />
+              <q-radio
+                dense
+                v-model="type"
+                val="flat"
+                label="Flat"
+                class="q-pa-sm"
+              />
+              <q-radio dense v-model="type" val="outline" label="Outline" />
+            </div>
+          </div>
+
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Icons</span>
+            <div>
+              <q-checkbox
+                size="xs"
+                v-model="iconLeft"
+                val="fa-kit-duotone fa-triangle-exclamation"
+                label="Left Icon"
+              />
+              <q-checkbox
+                size="xs"
+                v-model="iconRight"
+                val="fa-kit-duotone fa-triangle-exclamation"
+                label="Right Icon"
+              />
+            </div>
+          </div>
+
+          <div>
+            <q-checkbox size="xs" v-model="fullWidth" label="Full Width" />
+          </div>
+          <div>
+            <q-checkbox size="xs" v-model="disabled" label="Disable" />
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>