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

package/src/pages/InputText.vue

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

package/src/pages/MenuButton.vue

@@ -0,0 +1,194 @@
+<script setup>
+import ComponentBase from './ComponentBase.vue'
+import UMenuButtonStd from '../components/core/UMenuButtonStd.vue'
+import UMenuDropdown from '../components/core/UMenuDropdown.vue'
+import { computed, ref } from 'vue'
+
+// state of menu button
+const anchor = ref('center left')
+const ariaLabel = ref('Btn Icon')
+const avatarUrl = ref('https://cdn.quasar.dev/img/avatar1.jpg')
+const color = ref('primary')
+const displayName = ref('Label')
+const iconClass = ref('fa-kit-duotone fa-filter-list')
+const label = ref('Label')
+const menuOffset = ref([4, 4])
+const states = ref('Basic')
+const statesOptions = ['Basic', 'Icon', 'Button', 'Avatar', 'Prefix']
+const size = ref('md')
+const sizeOptions = ['sm', 'md', 'lg']
+const self = ref('center end')
+const selectedCountry = ref({
+  name: 'United States',
+  code: '+1',
+  flag: 'us',
+})
+const tooltip = ref('Tooltip')
+const type = ref('standard')
+
+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 = `<UMenuButtonStd
+      ref="btn"
+      :size="size"
+      :label="label"
+      :states="states"
+      :color="colorClass"
+      :icon-class="iconClass"
+      :ariaLabel="ariaLabel"
+      :tooltip="tooltip"
+      :selected-country="selectedCountry"
+      @update-country="selectCountry"
+      :displayName="displayName"
+      :avatarUrl="avatarUrl"
+      :anchor="anchor"
+      :self="self"
+      :menu-offset="menuOffset"
+    >
+    <template #menu>
+      <q-menu>
+      <q-list>
+        <q-item clickable v-ripple>
+          <q-item-section>Option 1</q-item-section>
+        </q-item>
+        <q-item clickable v-ripple>
+          <q-item-section>Option 2</q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+    </template>
+  </UMenuButtonStd>`  
+
+defineOptions({
+  name: 'BtnStd',
+})
+
+const selectCountry = (value) => {
+  selectedCountry.value = value
+}
+
+const countryOptions = [
+  { label: 'United States', code: '+1', leftIcon: 'fi fi-us' },
+  { label: 'Canada', code: '+1', leftIcon: 'fi fi-ca' },
+  { label: 'Mexico', code: '+52', leftIcon: 'fi fi-mx' },
+]
+
+const colorClass = computed(() => states.value === 'Avatar' ? 'neutral-2' : 'primary' )
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=3449-13467&node-type=instance&m=dev"
+    >
+      <template v-slot:component>
+        <UMenuButtonStd
+          ref="btn"
+          :size="size"
+          :label="label"
+          :states="states"
+          :color="colorClass"
+          :icon-class="iconClass"
+          :ariaLabel="ariaLabel"
+          :tooltip="tooltip"
+          :selected-country="selectedCountry"
+          @update-country="selectCountry"
+          :displayName="displayName"
+          :avatarUrl="avatarUrl"
+          :anchor="anchor"
+          :self="self"
+          :menu-offset="menuOffset"
+        >
+          <template #menu>
+            <!-- <q-menu>
+              <q-list>
+                <q-item clickable v-ripple>
+                  <q-item-section>Option 1</q-item-section>
+                </q-item>
+                <q-item clickable v-ripple>
+                  <q-item-section>Option 2</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu> -->
+          </template>
+        </UMenuButtonStd>
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-select v-model="states" :options="statesOptions" label="Menu state" />
+          <q-select 
+            v-model="iconClass"
+            :options="['fa-kit-duotone fa-filter-list','fa-kit fa-caret-down']"
+            label="Icon"
+            v-if="['Basic','Button','Icon'].includes(states)"
+          />
+          <q-input
+            label="Label"
+            v-model="label"
+            v-if="['Basic','Button'].includes(states)"
+          />
+          <q-input label="Tooltip" v-model="tooltip" v-if="states === 'Icon'" />
+          <q-input label="Aria Label" v-model="ariaLabel" v-if="states === 'Icon'" />
+          <q-input label="AVatar url" v-model="avatarUrl" v-if="states === 'Avatar'"/>
+          <q-input label="Avatar name" v-model="displayName" v-if="states === 'Avatar'"/>
+          <!-- <q-input label="Icon" v-model="iconClass" /> -->
+          <q-select v-model="size" :options="sizeOptions" label="Size" />
+          <div class="column" v-if="states === 'Icon'">
+            <span class="text-grey-8 text-caption-sm">Tooltip Position</span>
+            <div>
+              <q-select
+                v-model="anchor"
+                :options="anchorOptions"
+                label="Anchor Origin"
+              />
+              <q-select
+                v-model="self"
+                :options="selfOptions"
+                label="Self Origin"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/MenuDropdown.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref } from 'vue'
+import { UMenuDropdown } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+
+const Data = [
+  {
+    label: 'Profile',
+    leftIcon: 'fa-kit-duotone fa-user',
+  },
+  {
+    label: 'Settings',
+    leftIcon: 'fa-kit-duotone fa-admin',
+  },
+  {
+    label: 'Logout',
+    leftIcon: 'fa-kit-duotone fa-logout',
+  },
+]
+
+const size = ref('sm')
+const sizeOptions = ['sm', 'md', 'lg']
+
+const htmlContent = `<UMenuDropdown
+  :data="Data"
+  @onClick="onClick"
+  iconClass="icon-secondary-opacity"
+  :size="size"
+/>`
+
+defineOptions({
+  name: 'UMenuDropdown',
+})
+
+const onClick = () => {
+  console.log('check....')
+}
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-24&node-type=canvas&t=nWq2UjUIdqvWKgPg-0"
+    >
+      <template v-slot:component>
+        <!-- Using test-cls to demonstrate how to pass custom css -->
+        <UMenuDropdown
+          :data="Data"
+          @onClick="onClick"
+          iconClass="icon-secondary-opacity"
+          :size="size"
+          menuClass="test-cls"
+        >
+          <!-- Use slot here like this -->
+          <!-- <template #trailing_slot>
+            Write your code here
+          </template> -->
+        </UMenuDropdown>
+      </template>
+
+      <template v-slot:properties>
+        <div class="q-gutter-y-lg">
+          <q-select v-model="size" :options="sizeOptions" label="Size" />
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>
+
+<style lang="sass">
+.test-cls
+   max-height: 11.25rem !important
+   overflow-y: auto
+   scrollbar-width: none  // use this if we dont want to show scrollbar
+</style>

package/src/pages/MenuItem.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { ref } from 'vue'
+import { UMenuItem } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+
+const leftIcon = ref('fa-kit-duotone fa-home')
+const rightIcon = ref('fa-kit-duotone fa-circle-check')
+const label = ref('Label')
+const selected = ref(false)
+const destructive = ref(false)
+
+const htmlContent = `<UMenuItem
+  :label="label"
+  :leftIcon="leftIcon"
+  :rightIcon="rightIcon"
+  :selected="selected"
+  :destructive="destructive"
+/>`
+
+defineOptions({
+  name: 'UMenuItem',
+})
+
+const handleClick = () => {
+  console.log('item clicked')
+}
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=4-24&node-type=canvas&t=nWq2UjUIdqvWKgPg-0"
+    >
+      <template v-slot:component>
+        <UMenuItem
+          :label="label"
+          :leftIcon="leftIcon"
+          :rightIcon="rightIcon"
+          :selected="selected"
+          :destructive="destructive"
+          iconClass="icon-secondary-opacity"
+          @onClick="handleClick"
+        />
+      </template>
+
+      <template v-slot:properties>
+        <div class="q-gutter-y-lg">
+          <q-input label="Label" v-model="label" />
+          <q-input label="Left Icon" v-model="leftIcon" />
+          <q-input label="Right Icon" v-model="rightIcon" />
+          <div>
+            <q-checkbox
+              size="xs"
+              v-model="selected"
+              label="Selected"
+              v-if="!destructive"
+            />
+            <q-checkbox size="xs" v-model="destructive" label="Destructive" />
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>

package/src/pages/MultiSelectStd.vue

@@ -0,0 +1,174 @@
+<script setup>
+import { ref } from 'vue'
+import { UMultiSelectStd } from 'src/components'
+import ComponentBase from './ComponentBase.vue'
+
+const options_data = [
+  {
+    label: 'Guatemala',
+    value: 'Guatemala',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Colombia',
+    value: 'Colombia',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Turkmenistan',
+    value: 'Turkmenistan',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'France',
+    value: 'France',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Philippines',
+    value: 'Philippines',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Greece',
+    value: 'Greece',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Indonesia',
+    value: 'Indonesia',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Russia',
+    value: 'Russia',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Albania',
+    value: 'Albania',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Sweden',
+    value: 'Sweden',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Japan',
+    value: 'Japan',
+    icon: 'fa-kit-duotone fa-home',
+  },
+  {
+    label: 'Czech Republic',
+    value: 'Czech Republic',
+    icon: 'fa-kit-duotone fa-home',
+  },
+]
+const options = ref(options_data)
+
+const modelMultiple = ref([])
+
+const updateFn = (val) => {
+  const { multiSelect, remove, value } = val
+  if (multiSelect) {
+    modelMultiple.value.push(value)
+  } else if (remove) {
+    modelMultiple.value = modelMultiple.value.filter((v) => v !== value)
+  }
+  return
+}
+
+const filterFn = (val, update) => {
+  if (val === '') {
+    update(() => {
+      options.value = options_data
+    })
+    return
+  }
+
+  update(() => {
+    const needle = val.toLowerCase()
+    options.value = options_data.filter(
+      (v) => v.value.toLowerCase().indexOf(needle) > -1
+    )
+  })
+}
+
+const sizeOptions = ['sm', 'md', 'lg']
+
+const size = ref('sm')
+const useInput = ref(true)
+const hintText = ref('This is hint text')
+const toolTipText = ref('This is tooltip text')
+const label = ref('Label')
+const hintIcon = ref('fa-kit-duotone fa-triangle-exclamation')
+const leftIcon = ref('')
+const isRequired = ref(true)
+const placeholderText = ref('Placeholder')
+const htmlContent = ` <UMultiSelectStd
+    :options="options"
+    v-model="modelMultiple"
+    :label="label"
+    :updateFn="updateFn"
+    :filterFn="filterFn"
+    :useInput="useInput"
+    :size="size"
+    :hintText="hintText"
+    :isRequired="isRequired"
+    :toolTipText="toolTipText"
+    :hintIcon="hintIcon"
+    :leftIcon="leftIcon"
+    :placeholder="placeholderText"
+    color="$primary"
+    noSearchText="No result"
+  />`
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=2290-151315&t=qG4NJ0uRZzUxQs9M-0"
+    >
+      <template v-slot:component>
+        <UMultiSelectStd
+          :options="options"
+          v-model="modelMultiple"
+          :label="label"
+          :updateFn="updateFn"
+          :filterFn="filterFn"
+          :useInput="useInput"
+          :size="size"
+          :hintText="hintText"
+          :isRequired="isRequired"
+          :toolTipText="toolTipText"
+          :hintIcon="hintIcon"
+          :leftIcon="leftIcon"
+          :placeholder="placeholderText"
+          color="$primary"
+          noSearchText="No result"
+        />
+      </template>
+
+      <template v-slot:properties>
+        <div class="q-gutter-y-lg">
+          <q-input label="Label" v-model="label" />
+          <q-select v-model="size" :options="sizeOptions" label="Size" />
+          <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-input label="Placeholder" v-model="placeholderText" />
+          <q-input label="Left Icon" v-model="leftIcon" />
+
+          <div class="row">
+            <q-checkbox size="xs" v-model="isRequired" label="Required" />
+            <q-checkbox size="xs" v-model="useInput" label="Use Input" />
+          </div>
+        </div>
+      </template>
+      <template v-slot:code>
+        <pre>{{ htmlContent }}</pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>