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

package/src/pages/TablePage.vue

@@ -0,0 +1,375 @@
+<script setup>
+import UTableStd from '../components/core/UTableStd.vue'
+import ComponentBase from './ComponentBase.vue'
+import { computed, ref, watch } from 'vue'
+
+defineOptions({
+  name: 'TablePage',
+})
+
+const htmlContent = `<UTableStd
+  v-model:selected-rows="selectedRows"
+  v-model:rows="rows"
+  v-model:columns="columns"
+  v-model:pagination="pagination"
+  :tableRowHover="tableRowHover" // hover effect on each row of table
+  :separator="separator"
+  :loading="loading"
+  :multiSelection="multiSelection" // if user want to add selection to table
+  :flat="flat"
+  :bordered="bordered"
+  :grid="grid" // grid display for different screens
+  :virtualScroll="virtualScroll" // adding virtual Scroll to handle many rows in thousands
+  :stickyHeader="stickyHeader" // make sticky header
+  :isCustomSort="isCustomSort"
+  @onCustomSort="handleCustomSort" // is user adding custom sort need to emit this event
+  :customClass="customClass" // if user want to add any custom class
+  :title="title"
+  :showPagination="showPagination"
+/>
+
+
+// columns configurations
+{
+  field: 'name',
+  label: 'Dessert (100g serving)',
+  align: 'left',
+  sortable: true,
+  type: 'text',
+  sortOrder: 'asc', // sortOrder is required to sort according/descending to data type like text, number
+  avatarKey: 'image', // if user want to show avtar/icon/initials need to pass this, also modify rows like this
+                         image: {type: 'initials/image',value: 'database value',name: 'databasekey'},
+  captionKey: 'calories',
+  autoWidth: true,
+  style: 'color: red; width: 200px !important', // custom style on td, also its good to add property in percentage for custom styling
+  classes: 'my-classs', // custom class on td
+  headerStyle: 'width:50%', // custom header style
+  headerClasses: 'my-header-class', // custom header classes
+  showChipTooltip:true/false // to hide show tooltip on chip
+}
+`
+
+const columns = ref([
+  {
+    field: 'name',
+    label: 'Dessert (100g serving)',
+    align: 'left',
+    sortable: true,
+    type: 'text',
+    sortOrder: 'asc', // sortOrder is required to sort according/descending to data type like text, number
+    avatarKey: 'image', // if user want to show avtar/icon/initials need to pass this, { type: 'initials/image', value: value from database, name: 'name' }
+    captionKey: 'calories',
+    autoWidth: true,
+    // style: 'color: red; width: 200px !important',
+    // classes: ['my-classs'],
+    headerStyle: 'width:10% !important',
+    // headerClasses: ['my-header-class'],
+  },
+  {
+    align: 'center',
+    label: 'Calories',
+    field: 'calories',
+    sortable: true,
+    type: 'number',
+    sortOrder: 'desc',
+    align: 'center',
+    captionKey: 'calories', // if user want to show any caption below primary text need to pass this key with data key
+    autoWidth: true,
+  },
+  {
+    label: 'Fat (g)',
+    field: 'fat',
+    sortable: true,
+    type: 'number',
+    sortOrder: 'desc',
+    align: 'center',
+    autoWidth: true,
+  },
+  {
+    label: 'Carbs (g)',
+    field: 'carbs',
+    align: 'center',
+    autoWidth: true,
+  },
+  {
+    label: 'Protein (g)',
+    field: 'protein',
+    align: 'center',
+    autoWidth: true,
+  },
+  {
+    label: 'Sodium (mg)',
+    field: 'sodium',
+    align: 'center',
+    autoWidth: true,
+  },
+  {
+    label: 'Active',
+    field: 'active',
+    sortable: true,
+    type: 'text',
+    sortOrder: 'asc',
+    chipValues: [
+      // to show different types of chip
+      { value: 'Active', color: 'positive' },
+      { value: 'Inactive', color: 'accent' },
+      { value: 'Reghold', color: 'warning' },
+      { value: 'Default', color: 'primary' },
+    ],
+    align: 'center',
+    showChipTooltip: true, // to show and hide tooltip on chip only
+    offset: [14, 14], // tooltip offset to set position
+    anchor: 'bottom middle', // tooltip anchor
+    autoWidth: true,
+  },
+  {
+    label: 'Iron (%)',
+    field: 'iron',
+    sortable: true,
+    type: 'text',
+    sortOrder: 'asc',
+    align: 'center',
+    autoWidth: true,
+  },
+  {
+    label: '',
+    field: 'action',
+    align: 'center',
+    autoWidth: true,
+    actions: [
+      // {
+      //   label: 'View Team',
+      //   flat: true,
+      //   icon: 'fa-kit-duotone fa-eye',
+      //   handler: () => {
+      //     console.log('clicked',row)
+      //   },
+      //   size: 'sm',
+      //   color: 'primary',
+      //   tooltip: "View Team"
+      // },
+      {
+        icon: 'fa-kit-duotone fa-eye',
+        label: 'Edit', //for aria label
+        handler: (row) => handleEdit(row),
+        size: 'sm',
+        tooltip: 'View Team',
+      },
+      {
+        icon: 'fa-kit-duotone fa-circle-bolt',
+        label: 'Open', //for aria label
+        handler: (row) => handleOpen(row),
+        size: 'sm',
+        tooltip: 'Remove Team',
+      },
+      {
+        icon: 'fa-kit-duotone fa-circle-arrow-down',
+        label: 'Open', //for aria label
+        handler: (row) => handleOpen(row),
+        size: 'sm',
+        tooltip: 'Down',
+      },
+      {
+        icon: 'fa-kit-duotone fa-circle-arrow-up',
+        label: 'Open', //for aria label
+        handler: (row) => handleOpen(row),
+        size: 'sm',
+        tooltip: 'UP',
+      },
+    ],
+  },
+])
+
+const columnsData = computed(() => {
+  return columns.value
+})
+
+const handleEdit = (row) => {
+  console.log(row, 'demo')
+}
+
+const handleOpen = (row) => {
+  console.log(row, 'demo')
+}
+
+const rowsData = computed(() => {
+  let newRows = []
+  for (let index = 0; index < 5000; index++) {
+    newRows.push({
+      _id: `${index + 1 * 295}`,
+      name: `Frozen Yogurt - ${index}`,
+      calories: 159 + index * 1000,
+      fat: 6.0 + index,
+      carbs: 24 + index,
+      protein: 4.0 + index,
+      sodium: 87 + index / 2,
+      active: index % 2 ? 'Active' : isPrime(index) ? 'Reghold' : 'Inactive',
+      iron: `1% - ${index}`,
+      image: {
+        type: 'initials',
+        value: 'AC',
+        name: `Frozen Yogurt - ${index}`,
+      },
+    })
+  }
+  return newRows
+})
+
+const tableRowHover = ref(false)
+const separator = ref('horizontal')
+const loading = ref(false)
+const flat = ref(false)
+const bordered = ref(false)
+const multiSelection = ref(false)
+const grid = ref(false)
+const virtualScroll = ref(false)
+const stickyHeader = ref(true)
+const isCustomSort = ref(false)
+const customClass = ref('')
+const showPagination = ref(true)
+const title = ref('My table')
+const pagination = ref({
+  page: 1,
+  rowsPerPage: 15,
+  // rowsNumber: xx if getting data from a server
+})
+const selectedRows = ref([])
+
+const isPrime = (number) => {
+  if (number <= 1) {
+    return false
+  }
+  for (var i = 2; i < number; i++) {
+    if (number % i == 0) {
+      return false
+    }
+  }
+  return true
+}
+
+watch(virtualScroll, (newValue, oldValue) => {
+  if (newValue) {
+    pagination.value.rowsPerPage = 100
+  } else {
+    pagination.value.rowsPerPage = 15
+  }
+})
+
+const handleCustomSort = (key, sortOrder, type) => {
+  alert('This is custom sort.')
+}
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-27&t=RjtvChIRixuak5fz-0"
+      cardWidth="90%"
+    >
+      <template v-slot:component>
+        <UTableStd
+          v-model:selected-rows="selectedRows"
+          v-model:rows="rowsData"
+          v-model:columns="columnsData"
+          v-model:pagination="pagination"
+          :tableRowHover="tableRowHover"
+          :separator="separator"
+          v-model:loading="loading"
+          :multiSelection="multiSelection"
+          :flat="flat"
+          :bordered="bordered"
+          :grid="grid"
+          :virtualScroll="virtualScroll"
+          :stickyHeader="stickyHeader"
+          :isCustomSort="isCustomSort"
+          @onCustomSort="handleCustomSort"
+          :customClass="customClass"
+          :title="title"
+          :showPagination="showPagination"
+        />
+      </template>
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <div class="flex justify-start items-center">
+            <q-input
+              class="q-ml-sm"
+              label="Table Title"
+              v-model="title"
+            ></q-input>
+          </div>
+          <q-option-group
+            v-model="separator"
+            inline
+            :options="[
+              { label: 'Horizontal (default)', value: 'horizontal' },
+              { label: 'Vertical', value: 'vertical' },
+              { label: 'Cell', value: 'cell' },
+              { label: 'None', value: 'none' },
+            ]"
+          />
+
+          <div class="flex justify-start items-center">
+            <q-checkbox
+              size="sm"
+              v-model="multiSelection"
+              label="Multi Selection"
+            />
+            <q-checkbox
+              size="sm"
+              v-model="showPagination"
+              label="Show pagination"
+            />
+            <q-checkbox
+              class="q-ml-sm"
+              size="sm"
+              v-model="loading"
+              label="Loading"
+            />
+            <q-checkbox class="q-ml-sm" size="sm" v-model="flat" label="Flat" />
+            <q-checkbox
+              class="q-ml-sm"
+              size="sm"
+              v-model="bordered"
+              label="Bordered"
+            />
+            <q-checkbox
+              class="q-ml-sm"
+              size="sm"
+              v-model="tableRowHover"
+              label="Disable Table Row Hover Effect"
+            />
+            <q-checkbox
+              class="q-ml-sm"
+              size="sm"
+              v-model="grid"
+              label="Grid Style"
+            />
+            <q-checkbox
+              class="q-ml-sm"
+              size="sm"
+              v-model="virtualScroll"
+              label="Virtual Scroll"
+            />
+            <q-checkbox
+              class="q-ml-sm"
+              size="sm"
+              v-model="stickyHeader"
+              label="Sticky Header"
+            />
+            <q-checkbox
+              class="q-ml-sm"
+              size="sm"
+              v-model="isCustomSort"
+              label="Custom Sorting"
+            />
+          </div>
+        </div>
+      </template>
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>
+
+<style lang="sass"></style>

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>