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

package/src/pages/Chip.vue

@@ -1,108 +0,0 @@
-<script setup>
-import { UChip } from 'src/components'
-import ComponentBase from './ComponentBase.vue'
-import { ref } from 'vue'
-
-const chipLabel = ref('Label')
-const avatarLabel = ref('OR')
-const type = ref('primary')
-const iconClass = ref('')
-const typeOptions = [
-  'primary',
-  'accent',
-  'positive',
-  'warning',
-  'info',
-  'neutral',
-  'yellow',
-  'teal',
-  'gold',
-  'pink',
-]
-
-const dense = ref(false)
-const removable = ref(false)
-const isShowTooltip = ref(false)
-const modelVal = ref(true)
-
-const htmlContent = `
-<UChip
-  ref="chip"
-  v-model="modelVal"
-  @update:modelValue="modelVal = $event"
-  :type="type"
-  :dense="dense"
-  :iconClass="iconClass"
-  :avatarLabel="avatarLabel"
-  :chipLabel="chipLabel"
-  :removable="removable"
-  :isShowTooltip="isShowTooltip"
-  :offset="[14, 14]"
-  anchor="bottom middle"
-/>`
-
-defineOptions({
-  name: 'UChip',
-})
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2281-51609"
-    >
-      <template v-slot:component>
-        <UChip
-          ref="chip"
-          v-model="modelVal"
-          @update:modelValue="modelVal = $event"
-          :type="type"
-          :dense="dense"
-          :iconClass="iconClass"
-          :avatarLabel="avatarLabel"
-          :chipLabel="chipLabel"
-          :removable="removable"
-          :isShowTooltip="isShowTooltip"
-          :offset="[14, 14]"
-          anchor="bottom middle"
-        />
-      </template>
-
-      <template v-slot:properties>
-        <div class="column q-gutter-y-lg">
-          <q-input label="Chip Label" v-model="chipLabel"></q-input>
-          <q-input label="Avatar Label" v-model="avatarLabel"></q-input>
-          <!-- <q-input label="Icon" v-model="icon"></q-input> -->
-          <q-input label="Icon Class" v-model="iconClass"></q-input>
-          <q-select v-model="type" :options="typeOptions" label="Chip Type" />
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Chip Layout Type</span>
-            <q-checkbox
-              size="xs"
-              v-model="isShowTooltip"
-              label="Show Tooltip"
-            />
-          </div>
-
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Chip Layout Type</span>
-            <q-checkbox size="xs" v-model="dense" :val="true" label="Dense" />
-          </div>
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Removable</span>
-            <q-checkbox
-              size="xs"
-              v-model="removable"
-              :val="true"
-              label="Removable"
-            />
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre>{{ htmlContent }}</pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>

package/src/pages/ComponentBase.vue

@@ -1,54 +0,0 @@
-<script setup>
-import { openURL } from 'quasar'
-
-defineProps({
-  figmaUrl: {
-    type: String,
-    default: 'https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components',
-  },
-  cardWidth: {
-    // cardWidth added for the tabs component only to show the tabs alignment left and right
-    type: String,
-    default: 'auto',
-  },
-})
-</script>
-
-<template>
-  <q-page class="flex flex-center" style="width: 100%">
-    <q-card bordered flat :style="{ minWidth: '420px', width: cardWidth }">
-      <q-card-section>
-        <span class="text-h6">Component</span>
-        <div>
-          <slot name="component" />
-        </div>
-      </q-card-section>
-
-      <q-card-section class="bg-neutral-4">
-        <span class="text-h6">Properties</span>
-        <div>
-          <slot name="properties" />
-        </div>
-      </q-card-section>
-
-      <q-card-section class="bg-secondary text-grey-1">
-        <span class="text-h6">Code</span>
-        <div>
-          <slot name="code" />
-        </div>
-      </q-card-section>
-
-      <q-card-section class="bg-primary text-grey-1">
-        <span class="text-h6">Figma</span>
-        <div>
-          <q-btn
-            label="Link to Figma"
-            icon-right="open_in_new"
-            flat
-            @click="openURL(figmaUrl)"
-          />
-        </div>
-      </q-card-section>
-    </q-card>
-  </q-page>
-</template>

package/src/pages/Dialog.vue

@@ -1,206 +0,0 @@
-<script setup>
-import ComponentBase from './ComponentBase.vue'
-import UDialogStd from 'src/components/core/UDialogStd.vue'
-import UBtnStd from 'src/components/core/UBtnStd.vue'
-import { ref } from 'vue'
-
-const handleBackclick = () => {
-  alert('Back clicked')
-}
-const model = ref(true)
-const heading = ref('Test Heading')
-const position = ref('right')
-const leftIcon = ref('fa-kit-duotone fa-circle-arrow-left')
-const closeIcon = ref('fa-kit-duotone fa-circle-xmark')
-const showActionButtons = ref(true)
-const caption = ref('This is the caption')
-const divider = ref(true)
-const size = ref('half')
-const tab = ref('movie')
-
-const htmlContent = `<UDialogStd
-  :heading="heading"
-  :position="position"
-  :size="size"
-  :headingCaption="caption"
-  @onBackIconClick="handleBackclick()"
-  :showActionButtons="showActionButtons"
-  :closeIcon="closeIcon"
-  :leftIcon="leftIcon"
-  leftIconLabel="Back Icon"
-  closeIconLabel="Close Icon"
-  :divider="divider"
-  v-model="model"
->
-  <template #content>
-    ..Your Content
-  </template>
-  <template #secondary_row>
-  ...Your Content
-  </template>
-  <template #action_primary_one>
-    ...Your Content. Mainly Button
-  </template>
-  <template #action_primary_two>
-    ...Your Content. Mainly Button
-  </template>
-  <template #action_secondary_one>
-    ...Your Content. Mainly Button
-  </template>
-  <template #action_secondary_two>
-    ...Your Content. Mainly Button
-  </template>
-</UDialogStd>`
-defineOptions({
-  name: 'DialogStd',
-})
-
-const hideDialog = () => {
-  model.value = false
-}
-
-const showDialog = () => {
-  model.value = true
-}
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4982-91225&t=BcmxEUWPCe0DzRmH-0"
-    >
-      <template v-slot:component>
-        <UBtnStd
-          color="primary"
-          label="Show"
-          size="md"
-          @onClick="showDialog()"
-        ></UBtnStd>
-        <UDialogStd
-          :heading="heading"
-          :position="position"
-          :size="size"
-          :headingCaption="caption"
-          @onBackIconClick="handleBackclick()"
-          :showActionButtons="showActionButtons"
-          :closeIcon="closeIcon"
-          :leftIcon="leftIcon"
-          leftIconLabel="Back Icon"
-          closeIconLabel="Close Icon"
-          :divider="divider"
-          v-model="model"
-        >
-          <template #content>
-            <p v-for="n in 15" :key="n">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum
-              repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis
-              perferendis totam, ea at omnis vel numquam exercitationem aut,
-              natus minima, porro labore.
-            </p>
-          </template>
-          <template #secondary_row>
-            <q-tabs
-              v-model="tab"
-              dense
-              class="bg-primary text-white full-width"
-              active-color="white"
-              indicator-color="white"
-              align="justify"
-            >
-              <q-tab name="mails" label="Mails" />
-              <q-tab name="alarms" label="Alarms" />
-              <q-tab name="movies" label="Movies" />
-            </q-tabs>
-          </template>
-          <template #action_primary_one>
-            <UBtnStd
-              label="Cancel"
-              size="md"
-              color="primary"
-              outline
-              @onClick="hideDialog()"
-            ></UBtnStd>
-          </template>
-          <template #action_primary_two>
-            <UBtnStd label="Save" size="md" color="primary"></UBtnStd>
-          </template>
-          <template #action_secondary_one>
-            <UBtnStd label="Remove" size="md" color="accent"></UBtnStd>
-          </template>
-          <template #action_secondary_two>
-            <UBtnStd label="Delete" size="md" color="accent"></UBtnStd>
-          </template>
-        </UDialogStd>
-      </template>
-
-      <template v-slot:properties>
-        <div class="column q-gutter-y-lg">
-          <q-input label="Heading" v-model="heading" />
-          <q-input label="Caption" v-model="caption" />
-          <q-input label="Left Icon" v-model="leftIcon" />
-          <q-input label="Close Icon" v-model="closeIcon" />
-
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Size</span>
-            <div>
-              <q-radio dense v-model="size" val="default" label="Default" />
-              <q-radio
-                dense
-                v-model="size"
-                val="half"
-                label="Half"
-                class="q-pa-sm"
-              />
-              <q-radio
-                dense
-                v-model="size"
-                val="full"
-                label="Full"
-                class="q-pa-sm"
-              />
-            </div>
-          </div>
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Position</span>
-            <div>
-              <q-radio dense v-model="position" val="left" label="Left" />
-              <q-radio
-                dense
-                v-model="position"
-                val="right"
-                label="Right"
-                class="q-pa-sm"
-              />
-              <q-radio
-                dense
-                v-model="position"
-                val="top"
-                label="Top"
-                class="q-pa-sm"
-              />
-              <q-radio
-                dense
-                v-model="position"
-                val="bottom"
-                label="Bottom"
-                class="q-pa-sm"
-              />
-            </div>
-          </div>
-          <div>
-            <q-checkbox
-              size="xs"
-              v-model="showActionButtons"
-              label="Show Buttons"
-            />
-            <q-checkbox size="xs" v-model="divider" label="Divider" />
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre><code>{{ htmlContent }}</code></pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>

package/src/pages/ErrorNotFound.vue

@@ -1,11 +0,0 @@
-<template>
-  <q-page class="flex flex-center">
-    <span class="text-h3">Page not found</span>
-  </q-page>
-</template>
-
-<script setup>
-defineOptions({
-  name: "ErrorNotFoundPage",
-});
-</script>

package/src/pages/IndexPage.vue

@@ -1,11 +0,0 @@
-<template>
-  <q-page class="flex flex-center">
-    <p>Select a component from the sidebar to see its preview.</p>
-  </q-page>
-</template>
-
-<script setup>
-defineOptions({
-  name: 'IndexPage'
-})
-</script>

package/src/pages/InputPhone.vue

@@ -1,152 +0,0 @@
-<script setup>
-import ComponentBase from './ComponentBase.vue'
-import UInputPhoneStd from 'src/components/core/UInputPhoneStd.vue'
-import { computed, ref } from 'vue'
-
-const inputValue = ref('')
-const isRequired = ref(true)
-const validationRules = [(val) => val.length === 10]
-const errorMessage = ref('Please Provide a valid phone number')
-const hintText = ref('This is hint text')
-const placeholder = ref('Placeholder')
-const toolTipText = ref('This is tooltip')
-const hintIcon = ref('fa-kit-duotone fa-triangle-exclamation')
-const rightIcon = ref('fa-kit-duotone fa-triangle-exclamation')
-const size = ref('sm')
-const sizeOptions = ['sm', 'md', 'lg']
-const disabled = ref(false)
-const readonly = ref(false)
-const isError = ref(false)
-const type = ref('outline')
-const label = ref('Label')
-const mask = ref('##########')
-
-const selectedCountry = ref({
-  name: 'United States',
-  code: '+1',
-  flag: 'us',
-})
-
-const selectCountry = (value) => {
-  selectedCountry.value = value
-}
-
-const countryOptions = [
-  { name: 'United States', code: '+1', flag: 'us' },
-  { name: 'Canada', code: '+1', flag: 'ca' },
-  { name: 'Mexico', code: '+52', flag: 'mx' },
-]
-const borderless = computed(() => {
-  return type.value === 'borderless'
-})
-const outline = computed(() => {
-  return type.value === 'outline'
-})
-
-const htmlContent = `<UInputPhoneStd
-  :label="label"
-  :isRequired="isRequired"
-  :mask="mask"
-  v-model="inputValue"
-  :validationRules="validationRules"
-  :rightIcon="rightIcon"
-  :hintText="hintText"
-  :hintIcon="hintIcon"
-  :toolTipText="toolTipText"
-  :placeholder="placeholder"
-  :size="size"
-  :disable="disabled"
-  :readonly="readonly"
-  :error="isError"
-  lazy-rules
-  :error-message="errorMessage"
-  :borderless="borderless"
-  :outlined="outline"
-  :options="countryOptions"
-  :selected-country="selectedCountry"
-  @update-country="selectCountry"
-/>`
-
-defineOptions({
-  name: 'InputPhone',
-})
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=3395-4968"
-    >
-      <template v-slot:component>
-        <UInputPhoneStd
-          :label="label"
-          :isRequired="isRequired"
-          :mask="mask"
-          v-model="inputValue"
-          :validationRules="validationRules"
-          :rightIcon="rightIcon"
-          :hintText="hintText"
-          :hintIcon="hintIcon"
-          :toolTipText="toolTipText"
-          :placeholder="placeholder"
-          :size="size"
-          :disable="disabled"
-          :readonly="readonly"
-          :error="isError"
-          lazy-rules
-          :error-message="errorMessage"
-          :borderless="borderless"
-          :outlined="outline"
-          :options="countryOptions"
-          :selected-country="selectedCountry"
-          @update-country="selectCountry"
-        />
-      </template>
-
-      <template v-slot:properties>
-        <div class="column q-gutter-y-lg">
-          <q-input label="Label" v-model="label" />
-          <q-input label="Placeholder" v-model="placeholder" />
-          <q-input label="Error Message" v-model="errorMessage" />
-          <q-input label="Right Icon" v-model="rightIcon" />
-          <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-select v-model="size" :options="sizeOptions" label="Size" />
-
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Type</span>
-            <div>
-              <q-radio dense v-model="type" val="outline" label="Outline" />
-              <q-radio
-                dense
-                v-model="type"
-                val="borderless"
-                label="Borderless"
-                class="q-pa-sm"
-              />
-            </div>
-          </div>
-
-          <div>
-            <q-checkbox size="xs" v-model="disabled" label="Disable" />
-          </div>
-          <div>
-            <q-checkbox size="xs" v-model="readonly" label="Readonly" />
-          </div>
-          <div>
-            <q-checkbox size="xs" v-model="isError" label="Is Error" />
-          </div>
-          <div>
-            <q-checkbox size="xs" v-model="isRequired" label="Is required" />
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre><code>{{ htmlContent }}</code></pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>

package/src/pages/InputText.vue

@@ -1,140 +0,0 @@
-<script setup>
-import { UInputTextStd } from 'src/components'
-import ComponentBase from './ComponentBase.vue'
-import { computed, ref } from 'vue'
-
-const inputValue = ref('')
-const isRequired = ref(true)
-const validationRules = [(val) => val.length <= 3]
-const errorMessage = ref('Error message would go here')
-const hintText = ref('This is hint text')
-const placeholder = ref('Placeholder')
-const toolTipText = ref('This is tooltip')
-const hintIcon = ref('fa-kit-duotone fa-triangle-exclamation')
-const leftIcon = ref('fa-kit-duotone fa-magnifying-glass')
-const rightIcon = ref('fa-kit-duotone fa-triangle-exclamation')
-const size = ref('sm')
-const sizeOptions = ['sm', 'md', 'lg']
-const disabled = ref(false)
-const readonly = ref(false)
-const isError = ref(false)
-const leftBorderRadius = ref(false)
-const type = ref('outline')
-const label = ref('Label')
-
-const borderless = computed(() => {
-  return type.value === 'borderless'
-})
-const outline = computed(() => {
-  return type.value === 'outline'
-})
-
-const htmlContent = `<UInputTextStd
-    :label="label"
-    :isRequired="isRequired"
-    v-model="inputValue"
-    :validationRules="validationRules"
-    :leftIcon="leftIcon"
-    :rightIcon="rightIcon"
-    :hintText="hintText"
-    :hintIcon="hintIcon"
-    :toolTipText="toolTipText"
-    :placeholder="placeholder"
-    :size="size"
-    :disable="disabled"
-    :readonly="readonly"
-    :error="checkValidation()"
-    error-message="Error message would go here"
-    :borderless="borderless"
-    :outlined="outline"
-    :leftBorderRadius="leftBorderRadius"
-  />`
-
-defineOptions({
-  name: 'UInputTextStd',
-})
-</script>
-
-<template>
-  <q-page class="flex flex-center">
-    <ComponentBase
-      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=3395-4968"
-    >
-      <template v-slot:component>
-        <UInputTextStd
-          :label="label"
-          :isRequired="isRequired"
-          v-model="inputValue"
-          :validationRules="validationRules"
-          :leftIcon="leftIcon"
-          :rightIcon="rightIcon"
-          :hintText="hintText"
-          :hintIcon="hintIcon"
-          :toolTipText="toolTipText"
-          :placeholder="placeholder"
-          :size="size"
-          :disable="disabled"
-          :readonly="readonly"
-          :error="isError"
-          :error-message="errorMessage"
-          :borderless="borderless"
-          :outlined="outline"
-          :leftBorderRadius="leftBorderRadius"
-          parentClass="q-mb-ms"
-        />
-      </template>
-
-      <template v-slot:properties>
-        <div class="column q-gutter-y-lg">
-          <q-input label="Label" v-model="label" />
-          <q-input label="Placeholder" v-model="placeholder" />
-          <q-input label="Error Message" v-model="errorMessage" />
-          <q-input label="Left Icon" v-model="leftIcon" />
-          <q-input label="Right Icon" v-model="rightIcon" />
-          <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-select v-model="size" :options="sizeOptions" label="Size" />
-
-          <div class="column">
-            <span class="text-grey-8 text-caption-sm">Type</span>
-            <div>
-              <q-radio dense v-model="type" val="outline" label="Outline" />
-              <q-radio
-                dense
-                v-model="type"
-                val="borderless"
-                label="Borderless"
-                class="q-pa-sm"
-              />
-            </div>
-          </div>
-          <div>
-            <q-checkbox size="xs" v-model="disabled" label="Disable" />
-          </div>
-          <div>
-            <q-checkbox size="xs" v-model="readonly" label="Readonly" />
-          </div>
-          <div>
-            <q-checkbox size="xs" v-model="isError" label="Is Error" />
-          </div>
-          <div>
-            <q-checkbox
-              size="xs"
-              v-model="leftBorderRadius"
-              label="Left border radius"
-            />
-          </div>
-          <div>
-            <q-checkbox size="xs" v-model="isRequired" label="Is required" />
-          </div>
-        </div>
-      </template>
-
-      <template v-slot:code>
-        <pre><code>{{ htmlContent }}</code></pre>
-      </template>
-    </ComponentBase>
-  </q-page>
-</template>