@usssa/component-library 1.0.0-alpha.21 → 1.0.0-alpha.211

package/src/css/vars/colors.variables.sass

@@ -1,13 +1,13 @@
 // USSSA BLUE
-$blue-1: #E1E9F9 !default
-$blue-2: #CADBF9 !default
-$blue-3: #678BE0 !default
-$blue-4: #4571D9 !default
-$blue-5: #2A5ACB !default
-$blue-6: #234BA9 !default
-$blue-7: #183477 !default
-$blue-8: #143066 !default
-$blue-9: #0D2044 !default
+$blue-1: #EEF8FF !default
+$blue-2: #D8EDFF !default
+$blue-3: #B9E0FF !default
+$blue-4: #52B3FF !default
+$blue-5: #1371FD !default
+$blue-6: #0C5DF3 !default
+$blue-7: #1048BD !default
+$blue-8: #12316C !default
+$blue-9: #0D1F45 !default
 
 // USSSA GOLD
 $gold-1: #FBF6EE !default
@@ -21,15 +21,15 @@ $gold-8: #64482F !default
 $gold-9: #312017 !default
 
 // USSSA GREEN
-$green-1: #EFFAF4 !default
-$green-2: #D9F2E3 !default
-$green-3: #85D0AD !default
-$green-4: #53B48A !default
-$green-5: #248560 !default
-$green-6: #1A6248 !default
-$green-7: #174E3A !default
-$green-8: #144031 !default
-$green-9: #0A241C !default
+$green-1: #E4F6EB !default
+$green-2: #BCEACE !default
+$green-3: #6CCD91 !default
+$green-4: #0DBD76 !default
+$green-5: #009B5F !default
+$green-6: #007A4B !default
+$green-7: #00613C !default
+$green-8: #004839 !default
+$green-9: #002920 !default
 
 // USSSA NEUTRAL
 $neutral-1: #FFFFFF !default
@@ -47,15 +47,15 @@ $neutral-12: #202328 !default
 $neutral-13: #101114 !default
 
 // USSSA ORANGE
-$orange-1: #FEEEEB !default
-$orange-2: #FEE0D7 !default
-$orange-3: #FDBEAA !default
-$orange-4: #FA6C3D !default
-$orange-5: #FE4C10 !default
-$orange-6: #F8430D !default
-$orange-7: #D33809 !default
-$orange-8: #8C3712 !default
-$orange-9: #542007 !default
+$orange-1: #FEEEE2 !default
+$orange-2: #FEC49A !default
+$orange-3: #FBA66A !default
+$orange-4: #FD8B3A !default
+$orange-5: #FE7310 !default
+$orange-6: #E36002 !default
+$orange-7: #B74A01 !default
+$orange-8: #652B01 !default
+$orange-9: #3D1A01 !default
 
 // USSSA PINK
 $pink-1: #FAE0F4 !default
@@ -80,7 +80,7 @@ $purple-8: #403877 !default
 $purple-9: #262145 !default
 
 // USSSA RED
-$red-1: #FEF2F2 !default
+$red-1: #FFECE9 !default
 $red-2: #FCCCCE !default
 $red-3: #F9A8AB !default
 $red-4: #E94A50 !default
@@ -111,16 +111,3 @@ $yellow-6: #EBC321 !default
 $yellow-7: #D2AB0C !default
 $yellow-8: #B49104 !default
 $yellow-9: #8C7000 !default
-
-// USSSA RED TRANSPARENT
-$accent-transparent: rgba(203, 42, 61, .20)
-$accent-bg-hover: rgba(203, 42, 61, 0.15)
-
-// USSSA BLUE TRANSPARENT
-$primary-transparent: rgba(35, 75, 169, .20)
-$primary-bg-hover: rgba(35, 75, 169, .15)
-
-//USSSA Description content color
-$description : $neutral-9
-
-$surface-bg-1: #FFFFFF

package/src/utils/data.ts

@@ -0,0 +1,177 @@
+/**
+ * @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',
+
+    // 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/layouts/MainLayout.vue

@@ -1,137 +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: '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>