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

package/src/pages/BtnToggle.vue

@@ -0,0 +1,131 @@
+<script setup>
+import ComponentBase from './ComponentBase.vue'
+import UBtnToggle from 'src/components/core/UBtnToggle.vue'
+
+import { computed, ref } from 'vue'
+
+const toggleOptions = ref([
+  {
+    value: 'one',
+    slot: 'first',
+    name: 'Add new',
+    iconClass: 'fa-kit-duotone fa-circle-info',
+  },
+  {
+    value: 'two',
+    slot: 'second',
+    name: 'Pending invitations',
+    iconClass: 'fa-kit-duotone fa-circle-info',
+  },
+])
+
+const onAdd = () => {
+  toggleOptions.value.push({
+    value: '',
+    slot: '',
+    name: '',
+    iconClass: '',
+  })
+}
+
+const onRemove = () => {
+  toggleOptions.value.pop()
+}
+
+const model = ref('two')
+
+const htmlContent = `<UBtnToggle
+  :options="toggleOptions"
+  v-model="model"
+/>`
+
+const contentInfo = `The options should looklike [{
+    value: 'one',
+    slot: 'first',
+    name: 'Add new',
+    iconClass: 'fa-kit-duotone fa-circle-info',
+  },
+  {
+    value: 'two',
+    slot: 'second',
+    name: 'Pending invitations',
+    iconClass: 'fa-kit-duotone fa-circle-info',
+  },`
+
+defineOptions({
+  name: 'BtnToggle',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-18&t=lUWZsHyIzqTPpTfg-0"
+      card-width="70%"
+    >
+      <template v-slot:component>
+        <UBtnToggle :options="toggleOptions" v-model="model" />
+        <span>You selected option {{ model }}</span>
+      </template>
+
+      <template v-slot:properties>
+        <div class="q-gutter-x-sm q-pb-sm">
+          <q-btn label="Add" @click="onAdd()"></q-btn>
+          <q-btn
+            label="Remove"
+            @click="onRemove()"
+            :disable="toggleOptions.length <= 2"
+          ></q-btn>
+          <p>Make sure to have different slot and value name</p>
+        </div>
+
+        <div class="column q-gutter-y-lg" style="position: relative">
+          <div
+            v-for="(option, index) in toggleOptions"
+            :key="option"
+            class="column"
+          >
+            <div class="justify-start items-center">Option {{ index + 1 }}</div>
+            <div class="row q-gutter-x-sm">
+              <q-input
+                class="col-12 col-md-3"
+                placeholder="Slot"
+                v-model="option.slot"
+                label="Slot"
+                @input="updateItem(index, 'slot', option.slot)"
+              ></q-input>
+              <q-input
+                class="col-12 col-md-3"
+                placeholder="Value"
+                label="Value"
+                v-model="option.value"
+                @input="updateItem(index, 'value', option.value)"
+              ></q-input>
+              <q-input
+                class="col-12 col-md-3"
+                placeholder="Label"
+                label="Label"
+                v-model="option.name"
+                @input="updateItem(index, 'name', option.name)"
+              ></q-input>
+              <q-input
+                placeholder="Icon"
+                label="Icon"
+                class="col-12 col-md-4"
+                v-model="option.iconClass"
+                @input="updateItem(index, 'iconClass', option.iconClass)"
+              ></q-input>
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+        <pre class="text-neutral-6" style="font-size: 12px; font-weight: 600">{{
+          contentInfo
+        }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/CheckBox.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { computed, ref } from 'vue'
+import ComponentBase from './ComponentBase.vue'
+import { UCheckboxStd } from 'src/components'
+
+const label = ref('Checkbox')
+const checked = ref(false)
+const disabled = ref(false)
+const variant = ref('With Label')
+const variantOptions = ['With Label', 'Without Label']
+const showLabel = computed(() => {
+  return variant.value === 'With Label'
+})
+
+const htmlContent = `<UCheckboxStd
+  v-model="checked"
+  :label="label"
+  :showLabel="showLabel"
+  :disabled="disabled"
+  :id="u-checkbox"
+/>`
+
+defineOptions({
+  name: 'CheckBox',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2293-164568&t=W9U6NqDHbuiUvAxN-0"
+    >
+      <template v-slot:component>
+        <div class="q-mt-sm">
+          <UCheckboxStd
+            v-model="checked"
+            :label="label"
+            :showLabel="showLabel"
+            :disabled="disabled"
+            id="playground"
+          />
+        </div>
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Label" v-model="label" />
+          <q-select
+            v-model="variant"
+            :options="variantOptions"
+            label="Variant"
+          />
+          <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>

package/src/pages/Chip.vue

@@ -0,0 +1,108 @@
+<script setup>
+import { UChip } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+import { ref } from 'vue'
+
+const chipLabel = ref('Label')
+const avatarLabel = ref('OR')
+const type = ref('primary')
+const iconClass = ref('')
+const typeOptions = [
+  'primary',
+  'accent',
+  'positive',
+  'warning',
+  'info',
+  'neutral',
+  'yellow',
+  'teal',
+  'gold',
+  'pink',
+]
+
+const dense = ref(false)
+const removable = ref(false)
+const isShowTooltip = ref(false)
+const modelVal = ref(true)
+
+const htmlContent = `
+<UChip
+  ref="chip"
+  v-model="modelVal"
+  @update:modelValue="modelVal = $event"
+  :type="type"
+  :dense="dense"
+  :iconClass="iconClass"
+  :avatarLabel="avatarLabel"
+  :chipLabel="chipLabel"
+  :removable="removable"
+  :isShowTooltip="isShowTooltip"
+  :offset="[14, 14]"
+  anchor="bottom middle"
+/>`
+
+defineOptions({
+  name: 'UChip',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2281-51609"
+    >
+      <template v-slot:component>
+        <UChip
+          ref="chip"
+          v-model="modelVal"
+          @update:modelValue="modelVal = $event"
+          :type="type"
+          :dense="dense"
+          :iconClass="iconClass"
+          :avatarLabel="avatarLabel"
+          :chipLabel="chipLabel"
+          :removable="removable"
+          :isShowTooltip="isShowTooltip"
+          :offset="[14, 14]"
+          anchor="bottom middle"
+        />
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Chip Label" v-model="chipLabel"></q-input>
+          <q-input label="Avatar Label" v-model="avatarLabel"></q-input>
+          <!-- <q-input label="Icon" v-model="icon"></q-input> -->
+          <q-input label="Icon Class" v-model="iconClass"></q-input>
+          <q-select v-model="type" :options="typeOptions" label="Chip Type" />
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Chip Layout Type</span>
+            <q-checkbox
+              size="xs"
+              v-model="isShowTooltip"
+              label="Show Tooltip"
+            />
+          </div>
+
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Chip Layout Type</span>
+            <q-checkbox size="xs" v-model="dense" :val="true" label="Dense" />
+          </div>
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Removable</span>
+            <q-checkbox
+              size="xs"
+              v-model="removable"
+              :val="true"
+              label="Removable"
+            />
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/ComponentBase.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { openURL } from 'quasar'
+
+defineProps({
+  figmaUrl: {
+    type: String,
+    default: 'https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components',
+  },
+  cardWidth: {
+    // cardWidth added for the tabs component only to show the tabs alignment left and right
+    type: String,
+    default: 'auto',
+  },
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center" style="width: 100%">
+    <q-card bordered flat :style="{ minWidth: '420px', width: cardWidth }">
+      <q-card-section>
+        <span class="text-h6">Component</span>
+        <div>
+          <slot name="component" />
+        </div>
+      </q-card-section>
+
+      <q-card-section class="bg-neutral-4">
+        <span class="text-h6">Properties</span>
+        <div>
+          <slot name="properties" />
+        </div>
+      </q-card-section>
+
+      <q-card-section class="bg-secondary text-grey-1">
+        <span class="text-h6">Code</span>
+        <div>
+          <slot name="code" />
+        </div>
+      </q-card-section>
+
+      <q-card-section class="bg-primary text-grey-1">
+        <span class="text-h6">Figma</span>
+        <div>
+          <q-btn
+            label="Link to Figma"
+            icon-right="open_in_new"
+            flat
+            @click="openURL(figmaUrl)"
+          />
+        </div>
+      </q-card-section>
+    </q-card>
+  </q-page>
+</template>

package/src/pages/Dialog.vue

@@ -0,0 +1,206 @@
+<script setup>
+import ComponentBase from './ComponentBase.vue'
+import UDialogStd from 'src/components/core/UDialogStd.vue'
+import UBtnStd from 'src/components/core/UBtnStd.vue'
+import { ref } from 'vue'
+
+const handleBackclick = () => {
+  alert('Back clicked')
+}
+const model = ref(true)
+const heading = ref('Test Heading')
+const position = ref('right')
+const leftIcon = ref('fa-kit-duotone fa-circle-arrow-left')
+const closeIcon = ref('fa-kit-duotone fa-circle-xmark')
+const showActionButtons = ref(true)
+const caption = ref('This is the caption')
+const divider = ref(true)
+const size = ref('half')
+const tab = ref('movie')
+
+const htmlContent = `<UDialogStd
+  :heading="heading"
+  :position="position"
+  :size="size"
+  :headingCaption="caption"
+  @onBackIconClick="handleBackclick()"
+  :showActionButtons="showActionButtons"
+  :closeIcon="closeIcon"
+  :leftIcon="leftIcon"
+  leftIconLabel="Back Icon"
+  closeIconLabel="Close Icon"
+  :divider="divider"
+  v-model="model"
+>
+  <template #content>
+    ..Your Content
+  </template>
+  <template #secondary_row>
+  ...Your Content
+  </template>
+  <template #action_primary_one>
+    ...Your Content. Mainly Button
+  </template>
+  <template #action_primary_two>
+    ...Your Content. Mainly Button
+  </template>
+  <template #action_secondary_one>
+    ...Your Content. Mainly Button
+  </template>
+  <template #action_secondary_two>
+    ...Your Content. Mainly Button
+  </template>
+</UDialogStd>`
+defineOptions({
+  name: 'DialogStd',
+})
+
+const hideDialog = () => {
+  model.value = false
+}
+
+const showDialog = () => {
+  model.value = true
+}
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4982-91225&t=BcmxEUWPCe0DzRmH-0"
+    >
+      <template v-slot:component>
+        <UBtnStd
+          color="primary"
+          label="Show"
+          size="md"
+          @onClick="showDialog()"
+        ></UBtnStd>
+        <UDialogStd
+          :heading="heading"
+          :position="position"
+          :size="size"
+          :headingCaption="caption"
+          @onBackIconClick="handleBackclick()"
+          :showActionButtons="showActionButtons"
+          :closeIcon="closeIcon"
+          :leftIcon="leftIcon"
+          leftIconLabel="Back Icon"
+          closeIconLabel="Close Icon"
+          :divider="divider"
+          v-model="model"
+        >
+          <template #content>
+            <p v-for="n in 15" :key="n">
+              Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum
+              repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis
+              perferendis totam, ea at omnis vel numquam exercitationem aut,
+              natus minima, porro labore.
+            </p>
+          </template>
+          <template #secondary_row>
+            <q-tabs
+              v-model="tab"
+              dense
+              class="bg-primary text-white full-width"
+              active-color="white"
+              indicator-color="white"
+              align="justify"
+            >
+              <q-tab name="mails" label="Mails" />
+              <q-tab name="alarms" label="Alarms" />
+              <q-tab name="movies" label="Movies" />
+            </q-tabs>
+          </template>
+          <template #action_primary_one>
+            <UBtnStd
+              label="Cancel"
+              size="md"
+              color="primary"
+              outline
+              @onClick="hideDialog()"
+            ></UBtnStd>
+          </template>
+          <template #action_primary_two>
+            <UBtnStd label="Save" size="md" color="primary"></UBtnStd>
+          </template>
+          <template #action_secondary_one>
+            <UBtnStd label="Remove" size="md" color="accent"></UBtnStd>
+          </template>
+          <template #action_secondary_two>
+            <UBtnStd label="Delete" size="md" color="accent"></UBtnStd>
+          </template>
+        </UDialogStd>
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Heading" v-model="heading" />
+          <q-input label="Caption" v-model="caption" />
+          <q-input label="Left Icon" v-model="leftIcon" />
+          <q-input label="Close Icon" v-model="closeIcon" />
+
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Size</span>
+            <div>
+              <q-radio dense v-model="size" val="default" label="Default" />
+              <q-radio
+                dense
+                v-model="size"
+                val="half"
+                label="Half"
+                class="q-pa-sm"
+              />
+              <q-radio
+                dense
+                v-model="size"
+                val="full"
+                label="Full"
+                class="q-pa-sm"
+              />
+            </div>
+          </div>
+          <div class="column">
+            <span class="text-grey-8 text-caption-sm">Position</span>
+            <div>
+              <q-radio dense v-model="position" val="left" label="Left" />
+              <q-radio
+                dense
+                v-model="position"
+                val="right"
+                label="Right"
+                class="q-pa-sm"
+              />
+              <q-radio
+                dense
+                v-model="position"
+                val="top"
+                label="Top"
+                class="q-pa-sm"
+              />
+              <q-radio
+                dense
+                v-model="position"
+                val="bottom"
+                label="Bottom"
+                class="q-pa-sm"
+              />
+            </div>
+          </div>
+          <div>
+            <q-checkbox
+              size="xs"
+              v-model="showActionButtons"
+              label="Show Buttons"
+            />
+            <q-checkbox size="xs" v-model="divider" label="Divider" />
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/Drawer.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import ComponentBase from './ComponentBase.vue'
+import UDrawer from 'src/components/core/UDrawer.vue'
+
+defineOptions({
+  name: 'SideDrawer',
+})
+
+const open = ref(true)
+const miniState = ref(true)
+
+const drawerOpenClose = () => {
+  miniState.value = !miniState.value
+}
+
+const htmlContent = `<UDrawer
+  v-model:open="open"
+  v-model:miniState="miniState"
+  :menu="menu"
+  @menu-item-clicked="handleMenuClicked"
+  @close-drawer="drawerOpenClose"
+  :brand-logo="brandLogo"
+  :brand-mini-logo="brandMiniLogo"
+/>`
+
+const menu = ref([
+  {
+    label: 'Home',
+    leftIcon: 'fa-kit-duotone fa-home',
+    to: 'drawer',
+    rightIcon: 'fa-kit-duotone fa-official',
+    badgeInfo: '20',
+  },
+  {
+    label: 'Teams',
+    leftIcon: 'fa-kit-duotone fa-clipboard-list-check',
+    rightIcon: 'fa-kit-duotone fa-circle-check',
+    to: 'task-management',
+  },
+  {
+    label: 'Players',
+    leftIcon: 'fa-kit-duotone fa-cap',
+    to: 'task-management',
+  },
+  {
+    label: 'Messages',
+    leftIcon: 'fa-kit-duotone fa-official',
+    rightIcon: 'fa-kit-duotone fa-comments',
+    to: 'task-management',
+    badgeInfo: '40',
+  },
+  {
+    label: 'Shop',
+    leftIcon: 'fa-kit-duotone fa-bag-shopping',
+    to: 'task-management',
+  },
+])
+
+const handleMenuClicked = (menu) => {
+  console.log(menu, 'menu')
+}
+
+const brandLogo = ref('/icons/logo.svg')
+const brandMiniLogo = ref('/icons/logo-s.svg')
+</script>
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4694-115830&node-type=canvas&t=S05Wz0EMhQW7wqmm-0"
+      cardWidth="90%"
+    >
+      <template v-slot:component>
+        <q-layout
+          view="lHh Lpr lff"
+          container
+          style="height: 600px"
+          class="shadow-2 rounded-borders"
+        >
+          <q-header
+            elevated
+            :style="{ left: miniState ? '4rem' : '14rem' }"
+            class="bg-neutral-1"
+          >
+            <q-toolbar>
+              <q-icon
+                v-if="miniState"
+                aria-label="sidebar open/close icon"
+                class="fa-kit-duotone fa-sidebar-expand drawer-open-close-icon cursor-pointer"
+                @click="drawerOpenClose"
+              />
+              <q-toolbar-title class="text-black">Header</q-toolbar-title>
+            </q-toolbar>
+          </q-header>
+
+          <UDrawer
+            v-model:open="open"
+            v-model:miniState="miniState"
+            :menu="menu"
+            @menu-item-clicked="handleMenuClicked"
+            @close-drawer="drawerOpenClose"
+            :brand-logo="brandLogo"
+            :brand-mini-logo="brandMiniLogo"
+          />
+          <q-page-container>
+            <q-page padding>
+              <p v-for="n in 15" :key="n">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
+                nihil praesentium molestias a adipisci, dolore vitae odit,
+                quidem consequatur optio voluptates asperiores pariatur eos
+                numquam rerum delectus commodi perferendis voluptate?
+              </p>
+            </q-page>
+          </q-page-container>
+        </q-layout>
+      </template>
+      <template v-slot:properties>
+        <div class="column q-gutter-y-md">
+          <q-checkbox size="xs" v-model="miniState" label="Mini State" />
+        </div>
+      </template>
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>
+<style lang="sass"></style>