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

package/src/pages/TabsPage.vue

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

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

package/src/pages/TooltipPage.vue

@@ -1,125 +0,0 @@
-<script setup>
-import { computed, ref } from 'vue'
-import ComponentBase from './ComponentBase.vue'
-import { UTooltip } from 'src/components'
-
-const description = ref('This is a tooltip')
-const icon = ref('fa-kit-duotone fa-circle-info')
-const anchor = ref('top middle')
-const self = ref('bottom middle')
-const show = ref(true)
-const offsetX = ref(14)
-const offsetY = ref(14)
-
-const offset = computed(() => {
-  console.log(offsetX, offsetY)
-  return [parseInt(offsetX.value), parseInt(offsetY.value)]
-})
-
-const anchorOptions = [
-  'top left',
-  'top middle',
-  'top right',
-  'top start',
-  'top end',
-  'center left',
-  'center middle',
-  'center right',
-  'center start',
-  'center end',
-  'bottom left',
-  'bottom middle',
-  'bottom right',
-  'bottom start',
-  'bottom end',
-]
-const selfOptions = [
-  'top left',
-  'top middle',
-  'top right',
-  'top start',
-  'top end',
-  'center left',
-  'center middle',
-  'center right',
-  'center start',
-  'center end',
-  'bottom left',
-  'bottom middle',
-  'bottom right',
-  'bottom start',
-  'bottom end',
-]
-
-const htmlContent = `<UTooltip
-  :description="description"
-  :icon="icon"
-  :anchor="anchor"
-  :self="self"
-  :offset="offset"
-/>
-`
-
-defineOptions({
-  name: 'ToolTip',
-})
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=3594-360443&t=gcNLQiqLoeen326d-0"
-    >
-      <template v-slot:component>
-        <q-btn label="Hover">
-          <UTooltip
-            :description="description"
-            :icon="icon"
-            :anchor="anchor"
-            :self="self"
-            :offset="offset"
-          />
-        </q-btn>
-        <UTooltip
-          :description="description"
-          :icon="icon"
-          anchor="center middle"
-          self="center middle"
-          :no-parent-event="true"
-          v-model="show"
-        />
-      </template>
-
-      <template v-slot:properties>
-        <div class="column q-gutter-y-lg">
-          <q-input label="Description" v-model="description" />
-          <q-input label="Icon" v-model="icon" />
-        </div>
-        <div class="column">
-          <span class="text-grey-8 text-caption-sm q-mt-md">
-            Tooltip Position
-          </span>
-          <div>
-            <q-select
-              v-model="anchor"
-              :options="anchorOptions"
-              label="Anchor Origin"
-            />
-            <q-select
-              v-model="self"
-              :options="selfOptions"
-              label="Self Origin"
-            />
-            <q-input label="Offset X" v-model="offsetX" type="number" />
-            <q-input label="Offset Y" v-model="offsetY" type="number" />
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre><code>{{ htmlContent }}</code></pre>
-        <p>Offset will be an array i.e [14, 14]</p>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>

package/src/router/index.js

@@ -1,34 +0,0 @@
-import {
-  route
-} from 'quasar/wrappers'
-import {
-  createRouter,
-  createWebHistory,
-} from 'vue-router'
-import routes from './routes'
-
-/*
- * If not building with SSR mode, you can
- * directly export the Router instantiation;
- *
- * The function below can be async too; either use
- * async/await or return a Promise which resolves
- * with the Router instance.
- */
-
-export default route(function ( /* { store, ssrContext } */ ) {
-  const Router = createRouter({
-    scrollBehavior: () => ({
-      left: 0,
-      top: 0
-    }),
-    routes,
-
-    // Leave this as is and make changes in quasar.conf.js instead!
-    // quasar.conf.js -> build -> vueRouterMode
-    // quasar.conf.js -> build -> publicPath
-    history: createWebHistory(process.env.VUE_ROUTER_BASE)
-  })
-
-  return Router
-})

package/src/router/routes.js

@@ -1,121 +0,0 @@
-const routes = [
-  {
-    path: '/',
-    component: () => import('layouts/MainLayout.vue'),
-    children: [
-      {
-        path: '',
-        component: () => import('pages/IndexPage.vue'),
-      },
-      {
-        path: 'badge',
-        component: () => import('pages/BadgeStd.vue'),
-      },
-      {
-        path: 'button-standard',
-        component: () => import('pages/BtnStd.vue'),
-      },
-      {
-        path: 'button-icon',
-        component: () => import('pages/BtnIcon.vue'),
-      },
-      {
-        path: 'radio-btn',
-        component: () => import('pages/RadioBtn.vue'),
-      },
-      {
-        path: 'check-box',
-        component: () => import('pages/CheckBox.vue'),
-      },
-      {
-        path: 'input-text',
-        component: () => import('pages/InputText.vue'),
-      },
-      {
-        path: 'input-phone',
-        component: () => import('pages/InputPhone.vue'),
-      },
-      {
-        path: 'chip',
-        component: () => import('pages/Chip.vue'),
-      },
-      {
-        path: 'Avatar',
-        component: () => import('pages/Avatar.vue'),
-      },
-      {
-        path: 'avatar-group',
-        component: () => import('pages/AvatarGroup.vue'),
-      },
-      {
-        path: 'multiselect-standard',
-        component: () => import('pages/MultiSelectStd.vue'),
-      },
-      {
-        path: 'radio',
-        component: () => import('src/pages/Radio.vue'),
-      },
-      {
-        path: 'tabs/:tab',
-        component: () => import('pages/TabsPage.vue'),
-      },
-      {
-        path: 'tab-button',
-        component: () => import('pages/TabButtonPage.vue'),
-      },
-      {
-        path: 'tooltip',
-        component: () => import('src/pages/TooltipPage.vue'),
-      },
-      {
-        path: 'notify',
-        component: () => import('pages/NotifyPage.vue'),
-      },
-      {
-        path: 'banner',
-        component: () => import('pages/BannerPage.vue'),
-      },
-      {
-        path: 'toggle',
-        component: () => import('pages/TogglePage.vue'),
-      },
-      {
-        path: 'select',
-        component: () => import('pages/SelectStd.vue'),
-      },
-      {
-        path: 'table',
-        component: () => import('pages/TablePage.vue'),
-      },
-      {
-        path: 'dialog',
-        component: () => import('pages/Dialog.vue'),
-      },
-      {
-        path: 'pagination',
-        component: () => import('src/pages/Pagination.vue'),
-      },
-      {
-        path: 'button-toggle',
-        component: () => import('pages/BtnToggle.vue'),
-      },
-      {
-        path: 'menu-item',
-        component: () => import('src/pages/MenuItem.vue'),
-      },
-      {
-        path: 'menu-dropdown',
-        component: () => import('src/pages/MenuDropdown.vue'),
-      },
-    ],
-  },
-
-  // Always leave this as last one,
-  // but you can also remove it
-  {
-    path: '/:catchAll(.*)*',
-    component: () => import('pages/ErrorNotFound.vue'),
-  },
-]
-
-export default routes