@usssa/component-library 1.0.0-alpha.27 → 1.0.0-alpha.271

package/src/pages/MenuDropdown.vue

@@ -1,79 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import { UMenuDropdown } from 'src/components'
-import ComponentBase from './ComponentBase.vue'
-
-const Data = [
-  {
-    label: 'Profile',
-    leftIcon: 'fa-kit-duotone fa-user',
-  },
-  {
-    label: 'Settings',
-    leftIcon: 'fa-kit-duotone fa-admin',
-  },
-  {
-    label: 'Logout',
-    leftIcon: 'fa-kit-duotone fa-logout',
-  },
-]
-
-const size = ref('sm')
-const sizeOptions = ['sm', 'md', 'lg']
-
-const htmlContent = `<UMenuDropdown
-  :data="Data"
-  @onClick="onClick"
-  iconClass="icon-secondary-opacity"
-  :size="size"
-/>`
-
-defineOptions({
-  name: 'UMenuDropdown',
-})
-
-const onClick = () => {
-  console.log('check....')
-}
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-24&node-type=canvas&t=nWq2UjUIdqvWKgPg-0"
-    >
-      <template v-slot:component>
-        <!-- Using test-cls to demonstrate how to pass custom css -->
-        <UMenuDropdown
-          :data="Data"
-          @onClick="onClick"
-          iconClass="icon-secondary-opacity"
-          :size="size"
-          menuClass="test-cls"
-        >
-          <!-- Use slot here like this -->
-          <!-- <template #trailing_slot>
-            Write your code here
-          </template> -->
-        </UMenuDropdown>
-      </template>
-
-      <template v-slot:properties>
-        <div class="q-gutter-y-lg">
-          <q-select v-model="size" :options="sizeOptions" label="Size" />
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre>{{ htmlContent }}</pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>
-
-<style lang="sass">
-.test-cls
-   max-height: 11.25rem !important
-   overflow-y: auto
-   scrollbar-width: none  // use this if we dont want to show scrollbar
-</style>

package/src/pages/MenuItem.vue

@@ -1,68 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import { UMenuItem } from 'src/components'
-import ComponentBase from './ComponentBase.vue'
-
-const leftIcon = ref('fa-kit-duotone fa-home')
-const rightIcon = ref('fa-kit-duotone fa-circle-check')
-const label = ref('Label')
-const selected = ref(false)
-const destructive = ref(false)
-
-const htmlContent = `<UMenuItem
-  :label="label"
-  :leftIcon="leftIcon"
-  :rightIcon="rightIcon"
-  :selected="selected"
-  :destructive="destructive"
-/>`
-
-defineOptions({
-  name: 'UMenuItem',
-})
-
-const handleClick = () => {
-  console.log('item clicked')
-}
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-24&node-type=canvas&t=nWq2UjUIdqvWKgPg-0"
-    >
-      <template v-slot:component>
-        <UMenuItem
-          :label="label"
-          :leftIcon="leftIcon"
-          :rightIcon="rightIcon"
-          :selected="selected"
-          :destructive="destructive"
-          iconClass="icon-secondary-opacity"
-          @onClick="handleClick"
-        />
-      </template>
-
-      <template v-slot:properties>
-        <div class="q-gutter-y-lg">
-          <q-input label="Label" v-model="label" />
-          <q-input label="Left Icon" v-model="leftIcon" />
-          <q-input label="Right Icon" v-model="rightIcon" />
-          <div>
-            <q-checkbox
-              size="xs"
-              v-model="selected"
-              label="Selected"
-              v-if="!destructive"
-            />
-            <q-checkbox size="xs" v-model="destructive" label="Destructive" />
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre>{{ htmlContent }}</pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>

package/src/pages/MultiSelectStd.vue

@@ -1,174 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import { UMultiSelectStd } from 'src/components'
-import ComponentBase from './ComponentBase.vue'
-
-const options_data = [
-  {
-    label: 'Guatemala',
-    value: 'Guatemala',
-    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([])
-
-const updateFn = (val) => {
-  const { multiSelect, remove, value } = val
-  if (multiSelect) {
-    modelMultiple.value.push(value)
-  } else if (remove) {
-    modelMultiple.value = modelMultiple.value.filter((v) => v !== value)
-  }
-  return
-}
-
-const filterFn = (val, update) => {
-  if (val === '') {
-    update(() => {
-      options.value = options_data
-    })
-    return
-  }
-
-  update(() => {
-    const needle = val.toLowerCase()
-    options.value = options_data.filter(
-      (v) => v.value.toLowerCase().indexOf(needle) > -1
-    )
-  })
-}
-
-const sizeOptions = ['sm', 'md', 'lg']
-
-const size = ref('sm')
-const useInput = ref(true)
-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 = ` <UMultiSelectStd
-    :options="options"
-    v-model="modelMultiple"
-    :label="label"
-    :updateFn="updateFn"
-    :filterFn="filterFn"
-    :useInput="useInput"
-    :size="size"
-    :hintText="hintText"
-    :isRequired="isRequired"
-    :toolTipText="toolTipText"
-    :hintIcon="hintIcon"
-    :leftIcon="leftIcon"
-    :placeholder="placeholderText"
-    color="$primary"
-    noSearchText="No result"
-  />`
-</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>
-        <UMultiSelectStd
-          :options="options"
-          v-model="modelMultiple"
-          :label="label"
-          :updateFn="updateFn"
-          :filterFn="filterFn"
-          :useInput="useInput"
-          :size="size"
-          :hintText="hintText"
-          :isRequired="isRequired"
-          :toolTipText="toolTipText"
-          :hintIcon="hintIcon"
-          :leftIcon="leftIcon"
-          :placeholder="placeholderText"
-          color="$primary"
-          noSearchText="No result"
-        />
-      </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/NotifyPage.vue

@@ -1,109 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-import ComponentBase from './ComponentBase.vue'
-import { useNotify } from '../composables/useNotify'
-
-defineOptions({
-  name: 'NotifyPage',
-})
-
-const htmlContent = `notify({
-  type: type.value,
-  label: label.value,
-  message: message.value,
-  color: type.value,
-  timeout: timeout.value,
-  position: position.value,
-  progress: progress.value,
-  actionLabel: actionLabel.value,
-  icon: customLeftIcon.value, // if user want to pass custom icon then need to add icon prop
-  handler: () => {
-    console.log('clicked')
-  },
-
-  // how to use in different places
-  const { notify } = useNotify()
-})`
-
-const typeOptions = ['info', 'positive', 'accent', 'warning']
-const positionOptions = [
-  'top-left',
-  'top',
-  'top-right',
-  'left',
-  'center',
-  'right',
-  'bottom-left',
-  'bottom',
-  'bottom-right',
-]
-
-const label = ref('Label')
-const message = ref('This is Message')
-const type = ref('positive')
-const position = ref('bottom')
-const progress = ref(false)
-const timeout = ref(3000)
-const actionLabel = ref('Dismiss')
-const customLeftIcon = ref(null)
-const { notify } = useNotify()
-
-const showNotify = () => {
-  notify({
-    type: type.value,
-    label: label.value,
-    message: message.value,
-    color: type.value,
-    timeout: timeout.value,
-    position: position.value,
-    progress: progress.value,
-    actionLabel: actionLabel.value,
-    icon: customLeftIcon.value,
-    handler: () => {
-      alert('Button clicked!')
-    },
-  })
-}
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=3100-159608&t=PqBNKCpUHh5pEmuS-0"
-      cardWidth="50%"
-    >
-      <template v-slot:component>
-        &nbsp;
-        <q-btn color="primary" @click="showNotify" label="Show" />
-      </template>
-      <template v-slot:properties>
-        <div class="column q-gutter-y-md">
-          <q-input label="Label" v-model="label" />
-          <div class="flex justify-between items-center">
-            <q-input
-              style="width: 80%"
-              label="Timeout"
-              v-model="timeout"
-              :disable="!progress"
-            />
-            <q-checkbox size="xs" v-model="progress" label="Progress" />
-          </div>
-          <q-input label="Message" v-model="message" />
-          <q-input label="Action label" v-model="actionLabel" />
-          <q-input label="Custom Left icon" v-model="customLeftIcon" />
-          <q-select v-model="type" :options="typeOptions" label="Type" />
-          <q-select
-            v-model="position"
-            :options="positionOptions"
-            label="Position"
-          />
-        </div>
-      </template>
-      <template v-slot:code>
-        <pre style="font-size: 12px"><code>{{ htmlContent }}</code></pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>
-
-<style lang="sass"></style>

package/src/pages/Pagination.vue

@@ -1,71 +0,0 @@
-<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

@@ -1,80 +0,0 @@
-<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

@@ -1,104 +0,0 @@
-<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>