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

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>

package/src/pages/NotifyPage.vue

@@ -0,0 +1,109 @@
+<script setup>
+import { ref } from 'vue'
+import ComponentBase from './ComponentBase.vue'
+import { useNotify } from '../composables/useNotify'
+
+defineOptions({
+  name: 'NotifyPage',
+})
+
+const htmlContent = `notify({
+  type: type.value,
+  label: label.value,
+  message: message.value,
+  color: type.value,
+  timeout: timeout.value,
+  position: position.value,
+  progress: progress.value,
+  actionLabel: actionLabel.value,
+  icon: customLeftIcon.value, // if user want to pass custom icon then need to add icon prop
+  handler: () => {
+    console.log('clicked')
+  },
+
+  // how to use in different places
+  const { notify } = useNotify()
+})`
+
+const typeOptions = ['info', 'positive', 'accent', 'warning']
+const positionOptions = [
+  'top-left',
+  'top',
+  'top-right',
+  'left',
+  'center',
+  'right',
+  'bottom-left',
+  'bottom',
+  'bottom-right',
+]
+
+const label = ref('Label')
+const message = ref('This is Message')
+const type = ref('positive')
+const position = ref('bottom')
+const progress = ref(false)
+const timeout = ref(3000)
+const actionLabel = ref('Dismiss')
+const customLeftIcon = ref(null)
+const { notify } = useNotify()
+
+const showNotify = () => {
+  notify({
+    type: type.value,
+    label: label.value,
+    message: message.value,
+    color: type.value,
+    timeout: timeout.value,
+    position: position.value,
+    progress: progress.value,
+    actionLabel: actionLabel.value,
+    icon: customLeftIcon.value,
+    handler: () => {
+      alert('Button clicked!')
+    },
+  })
+}
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase
+      figmaUrl="https://www.figma.com/design/2FoTrjVL4ZrTdsvB4DcSao/Components?node-id=3100-159608&t=PqBNKCpUHh5pEmuS-0"
+      cardWidth="50%"
+    >
+      <template v-slot:component>
+        &nbsp;
+        <q-btn color="primary" @click="showNotify" label="Show" />
+      </template>
+      <template v-slot:properties>
+        <div class="column q-gutter-y-md">
+          <q-input label="Label" v-model="label" />
+          <div class="flex justify-between items-center">
+            <q-input
+              style="width: 80%"
+              label="Timeout"
+              v-model="timeout"
+              :disable="!progress"
+            />
+            <q-checkbox size="xs" v-model="progress" label="Progress" />
+          </div>
+          <q-input label="Message" v-model="message" />
+          <q-input label="Action label" v-model="actionLabel" />
+          <q-input label="Custom Left icon" v-model="customLeftIcon" />
+          <q-select v-model="type" :options="typeOptions" label="Type" />
+          <q-select
+            v-model="position"
+            :options="positionOptions"
+            label="Position"
+          />
+        </div>
+      </template>
+      <template v-slot:code>
+        <pre style="font-size: 12px"><code>{{ htmlContent }}</code></pre>
+      </template>
+    </ComponentBase>
+  </q-page>
+</template>
+
+<style lang="sass"></style>