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

package/src/utils/data.ts

@@ -0,0 +1,179 @@
+/**
+ * @description Format date
+ * @param {string} date
+ * @returns {string} - Returns Formatted Date
+ */
+
+export const formatDate = (date: Date | string | number) => {
+  const d = new Date(date)
+  return (
+    String(d.getDate()).padStart(2, '0') +
+    '/' +
+    String(d.getMonth() + 1).padStart(2, '0') +
+    '/' +
+    String(d.getFullYear()).slice(-2)
+  )
+}
+
+/**
+ * @description Return String with Fixed Length
+ * @param {string} string, length
+ * @returns {string} - Returns Return partial String
+ */
+export const fixStringLength = (str: string, length: number) => {
+  if (str?.length > length) {
+    return str.substring(0, length) + '....'
+  } else {
+    return str?.padEnd(length, ' ')
+  }
+}
+
+/**
+ * @description Get File Category from MIME Types
+ * @param {string} str - Mime Type
+ * @returns {string} - Returns Category :- pdf, video, audio, doc etc.
+ **/
+export const getFileCategory = (mimeType) => {
+  const mimeTypes = {
+    // Document MIME types
+    'application/pdf': 'pdf',
+    'application/msword': 'word',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+      'doc',
+    'text/plain': 'text',
+    'application/vnd.ms-excel': 'excel',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
+      'excel',
+    'application/vnd.ms-powerpoint': 'doc',
+    'application/vnd.openxmlformats-officedocument.presentationml.presentation':
+      'doc',
+
+    // Image MIME types
+    'image/jpeg': 'image',
+    'image/png': 'image',
+    'image/gif': 'image',
+    'image/bmp': 'image',
+    'image/svg+xml': 'image',
+    'image/webp': 'image',
+    'image/heic': 'image',
+    'image/heif': 'image',
+
+    // Video MIME types
+    'video/mp4': 'video',
+    'video/x-msvideo': 'video',
+    'video/x-matroska': 'video',
+    'video/quicktime': 'video',
+    'video/x-ms-wmv': 'video',
+    'video/avi': 'video',
+
+    // Audio MIME types
+    'audio/mpeg': 'audio',
+    'audio/wav': 'audio',
+    'audio/aac': 'audio',
+    'audio/flac': 'audio',
+
+    // Archive MIME types
+    'application/zip': 'archive',
+    'application/x-rar-compressed': 'archive',
+    'application/x-tar': 'archive',
+    'application/gzip': 'archive',
+
+    // Add more MIME types as needed
+  }
+
+  return mimeTypes[mimeType] || 'Unknown'
+}
+/**
+ * @description Parses intials from a "name" string
+ * @param {string} str - Name string (e.g. "John Hancock", "John", "John Tyler Smith")
+ * @returns {string} - Returns initials
+ **/
+export const parseInitials = (str: string): string | void => {
+  if (!str) return void 0
+  const parts = str.split(' ')
+
+  if (parts.length === 1) return parts[0].substring(0, 2).toUpperCase()
+
+  return `${parts[0].substring(0, 1).toUpperCase()}${parts[1]
+    .substring(0, 1)
+    .toUpperCase()}`
+}
+
+export const isQuasarColor = (color: string) => {
+  const quasarColors = [
+    'accent',
+    'dark',
+    'gold',
+    'info',
+    'negative',
+    'neutral',
+    'positive',
+    'pink',
+    'primary',
+    'secondary',
+    'teal',
+    'warning',
+    'yellow',
+  ]
+  const quasarShadeRegex = /^[a-zA-Z]+-\d+$/
+
+  return quasarColors.includes(color) || quasarShadeRegex.test(color)
+}
+
+export function categorizeObjects(
+  array: Record<string, any>[],
+  categoryField: string
+): Record<string, any[]> {
+  return array.reduce((acc, item) => {
+    if (!acc[item[categoryField]]) {
+      acc[item[categoryField]] = []
+    }
+    acc[item[categoryField]].push(item)
+    return acc
+  }, {})
+}
+
+export function deepEqual(
+  obj1: Record<string, any>,
+  obj2: Record<string, any>
+) {
+  // Check if both are the same reference
+  if (obj1 === obj2) {
+    return true
+  }
+
+  // Check if either is null or not an object
+  if (
+    obj1 == null ||
+    typeof obj1 !== 'object' ||
+    obj2 == null ||
+    typeof obj2 !== 'object'
+  ) {
+    return false
+  }
+
+  // Get the keys of both objects
+  const keys1 = Object.keys(obj1)
+  const keys2 = Object.keys(obj2)
+
+  // Check if they have the same number of keys
+  if (keys1.length !== keys2.length) {
+    return false
+  }
+
+  // Check if all keys and values are the same
+  for (let key of keys1) {
+    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export function trimmedLabel(text = '', maxLength = 20, fallback = '') {
+  const safeText = text || fallback
+  const isTrimmed = safeText.length > maxLength
+  const trimmed = isTrimmed ? safeText.slice(0, maxLength) + '...' : safeText
+  return { text: trimmed, isTrimmed }
+}

package/src/App.vue

@@ -1,9 +0,0 @@
-<template>
-  <router-view />
-</template>
-
-<script setup>
-defineOptions({
-  name: "App",
-});
-</script>

package/src/components/core/UMenutem.vue

@@ -1,130 +0,0 @@
-<script setup>
-import { computed, ref, watch } from 'vue'
-
-const props = defineProps({
-  leftIcon: {
-    type: String,
-  },
-  rightIcon: {
-    type: String,
-  },
-  label: {
-    type: String,
-  },
-  selected: {
-    type: Boolean,
-    default: false,
-  },
-  destructive: {
-    type: Boolean,
-    default: false,
-  },
-  iconClass: {
-    type: String,
-  },
-})
-
-const type = ref(props.destructive ? 'destructive' : 'default')
-
-watch(
-  () => props.destructive,
-  (newValue) => {
-    type.value = newValue ? 'destructive' : 'default'
-  }
-)
-
-const emit = defineEmits(['onClick'])
-
-const handleClick = () => {
-  return emit('onClick')
-}
-
-const labelColor = computed(() => {
-  if (props.destructive) {
-    return 'text-red-6'
-  } else if (props.selected) {
-    return 'text-primary'
-  }
-  return 'text-dark'
-})
-
-const iconColor = computed(() => {
-  if (props.destructive) {
-    return 'red-6'
-  } else if (props.selected) {
-    return 'primary'
-  }
-  return 'dark'
-})
-
-const backgroundColor = computed(() => {
-  if (props.selected && !props.destructive) {
-    return 'bg-blue-1'
-  }
-  return 'bg-neutral-1'
-})
-</script>
-
-<template>
-  <div class="u-menu-link q-mb-xxs">
-    <q-item
-      clickable
-      :class="`${backgroundColor} item-${type}`"
-      @click="handleClick"
-    >
-      <q-item-section side v-if="leftIcon">
-        <q-icon
-          :color="iconColor"
-          :class="`${leftIcon} ${iconClass}`"
-          size="1rem"
-          :aria-hidden="true"
-        />
-      </q-item-section>
-
-      <slot name="leading_slot"></slot>
-
-      <q-item-section class="text-body-sm label" :class="labelColor">
-        {{ label }}
-      </q-item-section>
-
-      <q-item-section side v-if="rightIcon">
-        <q-icon
-          :color="iconColor"
-          :class="`${rightIcon} ${iconClass}`"
-          size="1rem"
-          :aria-hidden="true"
-        />
-      </q-item-section>
-
-      <slot name="trailing_slot"></slot>
-    </q-item>
-  </div>
-</template>
-
-<style lang="sass">
-.u-menu-link
-  .q-item
-    border-radius: $xxs
-    padding: 0rem $xs
-    align-items: center
-    display: flex
-    min-height: $lg
-    gap: $xs
-    .q-item__section--avatar
-      min-width: 0px
-    .q-item__section--side
-      padding: 0px
-    &.item-destructive
-      &.q-hoverable:hover > .q-focus-helper:after
-        background: $red-6
-        opacity: 1
-    &.item-default
-      &.q-hoverable:hover > .q-focus-helper:after
-        background: $surface-bg-link-hover
-        opacity: 1
-    .label
-      word-break: break-all
-
-.u-menu-link:last-child
-  margin-bottom : 0
-</style>

package/src/layouts/MainLayout.vue

@@ -1,145 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineOptions({
-  name: 'MainLayout',
-})
-
-const components = [
-  {
-    title: 'Avatar',
-    path: '/avatar',
-  },
-  {
-    title: 'Avatar Group',
-    path: '/avatar-group',
-  },
-  {
-    title: 'Badge',
-    path: '/badge',
-  },
-  {
-    title: 'Banner',
-    path: '/banner',
-  },
-  {
-    title: 'Button',
-    path: '/button-standard',
-  },
-  {
-    title: 'Button Icon',
-    path: '/button-icon',
-  },
-  {
-    title: 'Button Toggle',
-    path: '/button-toggle',
-  },
-  {
-    title: 'Checkbox',
-    path: '/check-box',
-  },
-  {
-    title: 'Chip',
-    path: 'chip',
-  },
-  {
-    title: 'Dialog',
-    path: 'dialog',
-  },
-  {
-    title: 'Input Text',
-    path: 'input-text',
-  },
-  {
-    title: 'Input Phone',
-    path: 'input-phone',
-  },
-  {
-    title: 'Menu Dropdown',
-    path: 'menu-dropdown',
-  },
-  {
-    title: 'Menu Item',
-    path: 'menu-item',
-  },
-  {
-    title: 'MultiSelect',
-    path: 'multiselect-standard',
-  },
-  {
-    title: 'Notify',
-    path: '/notify',
-  },
-  {
-    title: 'Pagination',
-    path: 'pagination',
-  },
-  {
-    title: 'Radio',
-    path: 'radio',
-  },
-  {
-    title: 'Radio Button',
-    path: 'radio-btn',
-  },
-  {
-    title: 'Select',
-    path: 'select',
-  },
-  {
-    title: 'Tabs',
-    path: '/tabs/home',
-  },
-  {
-    title: 'Tab Button',
-    path: '/tab-button',
-  },
-  {
-    title: 'Tooltip',
-    path: '/tooltip',
-  },
-  {
-    title: 'Toggle',
-    path: '/toggle',
-  },
-  {
-    title: 'Table',
-    path: '/table',
-  },
-]
-
-const leftDrawerOpen = ref(true)
-</script>
-
-<template>
-  <q-layout view="hHh lpr fFf">
-    <q-header bordered>
-      <q-toolbar class="bg-primary">
-        <q-toolbar-title>USSSA Component Library</q-toolbar-title>
-      </q-toolbar>
-    </q-header>
-
-    <q-drawer v-model="leftDrawerOpen" bordered>
-      <q-list separator>
-        <q-item-label class="bg-grey-8 text-grey-3" header>
-          Select Component
-        </q-item-label>
-
-        <q-item
-          v-for="c of components.sort((a, b) => a.title.localeCompare(b.title))"
-          :key="c.title"
-          active-class="bg-info text-grey-1 text-weight-bold"
-          clickable
-          :to="c.path"
-        >
-          <q-item-section>
-            <q-item-label>{{ c.title }}</q-item-label>
-          </q-item-section>
-        </q-item>
-      </q-list>
-    </q-drawer>
-    <q-page-container>
-      <router-view />
-    </q-page-container>
-  </q-layout>
-</template>

package/src/pages/Avatar.vue

@@ -1,77 +0,0 @@
-<script setup>
-import { UAvatar } from 'src/components'
-import ComponentBase from './ComponentBase.vue'
-import { ref } from 'vue'
-
-const type = ref('label')
-const round = ref(true)
-const name = ref('A')
-const indicatorColor = ref('')
-const image = ref('')
-const size = ref('sm')
-const indicatorColorOptions = ['primary', 'accent', 'positive', 'neutral']
-const sizeOptions = ['sm', 'md', 'lg', 'xl']
-const showIndicator = ref(true)
-const htmlContent = `<UAvatar
-  ref="avatar"
-  :name="name"
-  :size="size"
-  :showIndicator="showIndicator"
-  :indicatorColor="indicatorColor"
-  :round="round"
-  :image="image"
-  />`
-
-defineOptions({
-  name: 'UAvatar',
-})
-</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>
-        <UAvatar
-          ref="avatar"
-          :name="name"
-          :size="size"
-          :showIndicator="showIndicator"
-          :indicatorColor="indicatorColor"
-          :round="round"
-          :image="image"
-        />
-      </template>
-
-      <template v-slot:properties>
-        <div class="column q-gutter-y-lg">
-          <q-input label="Name" v-model="name"></q-input>
-          <q-input label="image" v-model="image"></q-input>
-          <q-select v-model="size" :options="sizeOptions" label="Size" />
-          <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>
-          <div>
-            <q-checkbox size="xs" v-model="round" :val="true" label="Round" />
-          </div>
-          <q-select
-            v-model="indicatorColor"
-            :options="indicatorColorOptions"
-            label="Indicator Color"
-          />
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre>{{ htmlContent }}</pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>

package/src/pages/AvatarGroup.vue

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