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

package/src/pages/OverlayLoader.vue

@@ -0,0 +1,128 @@
+<script setup>
+import { ref } from 'vue'
+import { useOverlayLoader } from '../composables/useOverlayLoader'
+import ComponentBase from './ComponentBase.vue'
+import UBtnStd from 'src/components/core/UBtnStd.vue'
+import {
+  QSpinnerGears,
+  QSpinnerFacebook,
+  QSpinnerBars,
+  QSpinnerDots,
+} from 'quasar'
+
+defineOptions({
+  name: 'OverlayLoader',
+})
+
+const { showLoader, hideLoader } = useOverlayLoader()
+const messageColors = ['dark', 'white', 'primary', 'positive', 'warning']
+const backgroundColors = ['dark', 'white', 'primary', 'positive', 'warning']
+const spinnerColors = ['dark', 'white', 'primary', 'positive', 'warning']
+const spinnerOptions = [
+  {
+    label: 'QSpinnerGears',
+    value: QSpinnerGears,
+  },
+  {
+      label: 'QSpinnerBars',
+    value: QSpinnerBars,
+  },
+  {
+    label: 'QSpinnerDots',
+    value: QSpinnerDots,
+  },
+  {
+    label: 'QSpinnerFacebook',
+    value: QSpinnerFacebook,
+  },
+]
+const customProps = ref({
+  backgroundColor: 'dark',
+  message: 'Authenticating User',
+  messageColor: 'white',
+  spinner: spinnerOptions[0],
+  spinnerSize: '6rem',
+  spinnerColor: 'white',
+})
+
+const htmlContent = ` 
+const { showLoader, hideLoader } = useOverlayLoader()
+
+--To show the loader--
+
+showLoader({
+    backgroundColor:props.backgroundColor,
+    message: props..message,
+    messageColor: props.messageColor
+    spinner: props.spinner
+    spinnerSize: props.spinnerSize,
+    spinnerColor: props.spinnerColor,
+  })
+
+--To hide the loader--
+
+  hideLoader()`
+
+const showOverlayLoader = () => {
+  showLoader({
+    backgroundColor: customProps.value?.backgroundColor,
+    message: customProps.value?.message,
+    messageColor: customProps.value.messageColor,
+    spinner: customProps.value.spinner.value,
+    spinnerSize: customProps.value.spinnerSize,
+    spinnerColor: customProps.value.spinnerColor,
+  })
+
+  setTimeout(() => {
+    hideLoader()
+  }, 2000)
+}
+
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase figmaUrl="#">
+      <template v-slot:component>
+        <UBtnStd label="Show loader" color="primary" @on-click="showOverlayLoader" />
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Message" v-model="customProps.message" />
+          <q-input
+            label="Spinner size (In rem)"
+            v-model="customProps.spinnerSize"
+          />
+
+          <q-select
+            v-model="customProps.messageColor"
+            :options="messageColors"
+            label="Message color"
+          />
+          <q-select
+            v-model="customProps.backgroundColor"
+            :options="backgroundColors"
+            label="Background color"
+          />
+          <q-select
+            v-model="customProps.spinnerColor"
+            :options="spinnerColors"
+            label="Spinner color"
+          />
+          <q-select
+            v-model="customProps.spinner"
+            :options="spinnerOptions"
+            option-value="value"
+            option-label="label"
+            label="Spinner"
+          />
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/Pagination.vue

@@ -0,0 +1,71 @@
+<script setup>
+import ComponentBase from './ComponentBase.vue'
+import UPagination from 'src/components/core/UPagination.vue'
+import { ref } from 'vue'
+
+const perPageOptions = [
+  { label: '5 / per page', value: 5 },
+  { label: '10 / per page', value: 10 },
+  { label: '15 / per page', value: 15 },
+  { label: '20 / per page', value: 20 },
+  { label: '25 / per page', value: 25 },
+]
+
+const currentPage = ref(5)
+const rowPerPage = ref(10)
+const maxPages = ref(20)
+const maxPageLink = ref(6)
+
+const htmlContent = `<UPagination
+  v-model="currentPage"
+  :perPageOptions="perPageOptions"
+  :maxPageLink="Number(maxPageLink)"
+  :maxPages="Number(maxPages)"
+  @onPageChange="onPageChange"
+  @onRowChange="onRowPerPageChange"
+/>`
+
+const onPageChange = (page) => {
+  currentPage.value = page
+}
+const onRowPerPageChange = (newRowPerPage) => {
+  rowPerPage.value = newRowPerPage
+  currentPage.value = 1
+}
+defineOptions({
+  name: 'PaginationStd',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4007-38376"
+    >
+      <template v-slot:component>
+        <UPagination
+          v-model="currentPage"
+          :perPageOptions="perPageOptions"
+          :maxPageLink="Number(maxPageLink)"
+          :maxPages="Number(maxPages)"
+          @onPageChange="onPageChange"
+          @onRowChange="onRowPerPageChange"
+        />
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Max page" v-model="maxPages"></q-input>
+          <q-input
+            label="Max number of page link"
+            v-model="maxPageLink"
+          ></q-input>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/Radio.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref } from 'vue'
+import ComponentBase from './ComponentBase.vue'
+import { URadioStd } from 'src/components'
+
+const disabledFirst = ref(false)
+const disabledSecond = ref(false)
+
+const label1 = ref('Radio1')
+
+const label2 = ref('Radio2')
+
+const value1 = ref('one')
+const value2 = ref('two')
+const radioValue = ref()
+
+const htmlContent = `<URadioStd
+  :label="label"
+  v-model="radioValue"
+  :value="value"
+  :disable="disabled"
+  :id="id"
+/>`
+
+defineOptions({
+  name: 'URadio',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2290-152010&t=ZyHTLbK43OFj9gBL-0"
+    >
+      <template v-slot:component>
+        <div class="q-gutter-x-md q-mb-sm">
+          <URadioStd
+            :label="label1"
+            v-model="radioValue"
+            :value="value1"
+            :disable="disabledFirst"
+            id="u-radio"
+          />
+          <URadioStd
+            :label="label2"
+            v-model="radioValue"
+            :value="value2"
+            :disable="disabledSecond"
+            id="u-radio-2"
+          />
+        </div>
+        <div>
+          <p>Your selection is: {{ radioValue }}</p>
+        </div>
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Label1" v-model="label1" />
+          <q-input label="Label2" v-model="label2" />
+
+          <q-checkbox
+            size="xs"
+            v-model="disabledFirst"
+            label="Disable Radio1"
+          />
+          <q-checkbox
+            size="xs"
+            v-model="disabledSecond"
+            label="Disable Radio2"
+          />
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/RadioBtn.vue

@@ -0,0 +1,104 @@
+<script setup>
+import { URadioBtn } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+import { ref } from 'vue'
+
+const label = ref('Label')
+const description = ref('Text')
+const imgAriaLabel = ref('Visa Logo')
+const altText = ref('Visa Logo')
+const iconColor = ref('primary')
+
+const label1 = ref('Label-1')
+const description1 = ref('Text-1')
+
+const image = ref('/icons/visa.svg')
+
+const value1 = ref('1')
+const value2 = ref('2')
+
+const colorOptions = ['primary', 'neutral', 'accent', 'white']
+
+const id = ref('1')
+const id1 = ref('2')
+
+const modelValue = ref()
+const iconClass = ref()
+
+const htmlContent = ` <URadioBtn
+  :label="label"
+  :description="description"
+  :image="image"
+  :icon-class="iconClass"
+  :value="value1"
+  v-model="modelValue"
+  :icon-color="iconColor"
+  :id="id"
+  />`
+
+defineOptions({
+  name: 'RadionBtn',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=3721-441044"
+    >
+      <template v-slot:component>
+        <div class="flex" style="gap: 0.5rem">
+          <URadioBtn
+            :label="label"
+            :description="description"
+            :image="image"
+            :icon-class="iconClass"
+            :value="value1"
+            :altText="altText"
+            :imgAriaLabel="imgAriaLabel"
+            :icon-color="iconColor"
+            v-model="modelValue"
+            :id="id"
+          />
+
+          <URadioBtn
+            :label="label1"
+            :icon-class="iconClass"
+            :image="image"
+            :description="description1"
+            :value="value2"
+            v-model="modelValue"
+            :altText="altText"
+            :imgAriaLabel="imgAriaLabel"
+            :icon-color="iconColor"
+            :id="id1"
+          />
+        </div>
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Label" v-model="label"></q-input>
+          <q-input label="Description" v-model="description"></q-input>
+          <q-input label="Image" v-model="image"></q-input>
+          <q-input label="Image Aria Label" v-model="imgAriaLabel"></q-input>
+          <q-input label="Image Alt text" v-model="altText"></q-input>
+          <q-input
+            label="Icon Class"
+            v-model="iconClass"
+            placeholder="fa-kit-duotone fa-circle-bolt"
+          ></q-input>
+          <q-select
+            v-model="iconColor"
+            :options="colorOptions"
+            label="Icon Color"
+          />
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/SelectStd.vue

@@ -0,0 +1,160 @@
+<script setup>
+import { ref } from 'vue'
+import ComponentBase from './ComponentBase.vue'
+import { USelectStd } from 'src/components'
+
+const options_data = [
+  {
+    label: 'Guatemala',
+    value: 'Guatemala',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Philippines',
+    value: 'Philippines',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Colombia',
+    value: 'Colombia',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Turkmenistan',
+    value: 'Turkmenistan',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'France',
+    value: 'France',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Philippines',
+    value: 'Philippines',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Greece',
+    value: 'Greece',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Indonesia',
+    value: 'Indonesia',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Russia',
+    value: 'Russia',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Albania',
+    value: 'Albania',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Sweden',
+    value: 'Sweden',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Japan',
+    value: 'Japan',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Czech Republic',
+    value: 'Czech Republic',
+    icon: 'fa-kit-duotone fa-home',
+  },
+]
+const options = ref(options_data)
+
+const modelMultiple = ref(null)
+
+const sizeOptions = ['sm', 'md', 'lg']
+
+const filterFn = (val, update) => {
+  update(() => {
+    const needle = val.toLowerCase()
+    options.value = options_data.filter(
+      (v) => v.value.toLowerCase().indexOf(needle) > -1
+    )
+  })
+}
+
+const size = ref('sm')
+const useInput = ref(false)
+const hintText = ref('This is hint text')
+const toolTipText = ref('This is tooltip text')
+const label = ref('Label')
+const hintIcon = ref('fa-kit-duotone fa-triangle-exclamation')
+const leftIcon = ref('')
+const isRequired = ref(true)
+const placeholderText = ref('Placeholder')
+const htmlContent = `<USelectStd
+    v-model="modelMultiple"
+    color="$primary"
+    noSearchText="No result"
+    :options="options"
+    :label="label"
+    :size="size"
+    :hintText="hintText"
+    :isRequired="isRequired"
+    :toolTipText="toolTipText"
+    :hintIcon="hintIcon"
+    :useInput="useInput"
+    :leftIcon="leftIcon"
+    :filterFn="filterFn"
+    :placeholder="placeholderText"
+  />`
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2290-151315&t=qG4NJ0uRZzUxQs9M-0"
+    >
+      <template v-slot:component>
+        <USelectStd
+          v-model="modelMultiple"
+          color="$primary"
+          noSearchText="No result"
+          :options="options"
+          :label="label"
+          :size="size"
+          :hintText="hintText"
+          :isRequired="isRequired"
+          :toolTipText="toolTipText"
+          :hintIcon="hintIcon"
+          :useInput="useInput"
+          :leftIcon="leftIcon"
+          :filterFn="filterFn"
+          :placeholder="placeholderText"
+        />
+      </template>
+
+      <template v-slot:properties>
+        <div class="q-gutter-y-lg">
+          <q-input label="Label" v-model="label" />
+          <q-select v-model="size" :options="sizeOptions" label="Size" />
+          <q-input label="Hint Icon" v-model="hintIcon" />
+          <q-input label="Hint Text" v-model="hintText" />
+          <q-input label="Tooltip Text" v-model="toolTipText" />
+          <q-input label="Placeholder" v-model="placeholderText" />
+          <q-input label="Left Icon" v-model="leftIcon" />
+
+          <div class="row">
+            <q-checkbox size="xs" v-model="isRequired" label="Required" />
+            <q-checkbox size="xs" v-model="useInput" label="Use Input" />
+          </div>
+        </div>
+      </template>
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/TabButtonPage.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { UTabBtnStd } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+import { ref } from 'vue'
+
+defineOptions({
+  name: 'TabButtonPage',
+})
+
+const htmlContent = `<UTabBtnStd
+  :buttonTabsOptions="buttonTabsOptions"
+  v-model="selectedTab"
+  :size="size"
+/>`
+
+const selectedTab = ref('1')
+const size = ref('md')
+const standard = ref(false)
+const sizeOptions = ['sm', 'md']
+const buttonTabsOptions = ref([
+  {
+    label: 'Button 1',
+    id: '1',
+    icon: 'fa-kit-duotone fa-circle-bolt',
+    badgeLabel: null,
+    disable: false,
+  },
+  {
+    label: 'Button 2',
+    id: '2',
+    icon: 'fa-kit-duotone fa-circle-bolt',
+    badgeLabel: null,
+    disable: false,
+  },
+])
+
+const updateItem = (index, key, value) => {
+  buttonTabsOptions.value[index][key] = value
+}
+</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="50%"
+    >
+      <template v-slot:component>
+        <UTabBtnStd
+          :buttonTabsOptions="buttonTabsOptions"
+          v-model="selectedTab"
+          :size="size"
+          :standard="standard"
+        />
+        <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="1">
+            <q-card class="q-pa-sm">
+              <div class="text-h6">First</div>
+              This is a example q-tab-panels with animation - First
+            </q-card>
+          </q-tab-panel>
+          <q-tab-panel class="text-center" name="2">
+            <q-card class="q-pa-sm">
+              <div class="text-h6">Second</div>
+              This is a example q-tab-panels with animation - Second
+            </q-card>
+          </q-tab-panel>
+        </q-tab-panels>
+      </template>
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-select v-model="size" :options="sizeOptions" label="Size" />
+          <q-checkbox size="xs" v-model="standard" label="Standard tab" />
+          <div class="row playground-wrapper">
+            <div
+              class="tab-playground-wrapper"
+              v-for="(tabOption, index) in buttonTabsOptions"
+              :key="tabOption.id"
+            >
+              <q-checkbox
+                size="xs"
+                @input="updateItem(index, 'disable', tabOption.disable)"
+                v-model="tabOption.disable"
+                label="Disable tab"
+              />
+              <q-input
+                v-model="tabOption.label"
+                label="Label"
+                @input="updateItem(index, 'label', tabOption.label)"
+              />
+              <q-input
+                @input="updateItem(index, 'icon', tabOption.icon)"
+                v-model="tabOption.icon"
+                label="Icon"
+              />
+              <q-input
+                v-model="tabOption.badgeLabel"
+                label="Badge Info"
+                @input="updateItem(index, 'badgeLabel', tabOption.badgeLabel)"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>
+
+<style lang="sass">
+.playground-wrapper
+  gap: 1rem
+  flex-wrap: nowrap
+
+.tab-playground-wrapper
+  width: 100%
+</style>