@usssa/component-library 1.0.0-alpha.31 → 1.0.0-alpha.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.31",
+  "version": "1.0.0-alpha.33",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Troy Moreland <troy.moreland@usssa.com>",

package/src/assets/logo.svg

@@ -0,0 +1,19 @@
+<svg width="95" height="24" viewBox="0 0 95 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<g id="Lettering">
+<path d="M3.80408 2.66675H8.95923L4.80595 13.2946L11.6168 13.2333L15.8059 2.66675H20.8L16.7704 12.978C15.8482 15.3379 13.5896 16.889 11.0754 16.889H3.24023L3.23972 16.8853C0.95221 16.7796 -0.597379 14.4417 0.221722 12.2504L3.80408 2.66675Z" fill="#234BA9"/>
+<path d="M25.3431 2.66675C24.1871 2.66675 23.1592 3.40891 22.7861 4.5129L22.2017 6.24262L21.3962 8.1931L20.9479 9.20419C20.5153 10.1799 21.2229 11.2814 22.2822 11.2814H30.0955L29.3215 13.3117H19.4306L17.9807 16.8876H30.4658C31.6432 16.8876 32.7118 16.1933 33.199 15.1119L34.01 13.3117H33.9934L34.7674 11.2814H34.7746L35.0296 10.6669C35.5176 9.49105 34.6615 8.1931 33.398 8.1931H26.3902L27.1957 6.24262H36.3783L37.8282 2.66675H25.3431Z" fill="#234BA9"/>
+<path d="M65.9075 2.66675C64.7515 2.66675 63.7235 3.40891 63.3505 4.5129L62.7661 6.24262L61.9606 8.1931L61.5123 9.20419C61.0797 10.1799 61.7873 11.2814 62.8466 11.2814H70.6599L69.8859 13.3117H59.995L58.5451 16.8876H71.0302C72.2076 16.8876 73.2762 16.1933 73.7634 15.1119L74.5744 13.3117H74.5578L75.3318 11.2814H75.339L75.594 10.6669C76.0819 9.49105 75.2259 8.1931 73.9624 8.1931H66.9546L67.7601 6.24262H76.9427L78.3926 2.66675H65.9075Z" fill="#234BA9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M92.0723 2.66675H80.9702L79.6009 6.24262H89.5386L88.7205 8.27437H81.103C79.3981 8.27437 77.8944 9.40113 77.4017 11.0479L76.8451 12.908C76.2519 14.8906 77.7229 16.8889 79.7755 16.8888L90.3945 16.8883L93.6818 8.51818H93.697L94.5025 6.24262C95.162 4.52034 93.9023 2.66675 92.0723 2.66675ZM81.373 13.3131L82.259 11.2001H87.6558L86.7698 13.3131H81.373Z" fill="#234BA9"/>
+</g>
+<path id="top" d="M47.7783 0.00113767H62.8782C61.1471 3.8405 58.0313 4.88033 55.3948 4.88033H49.6691V1.41424L47.2456 4.88033H43.464L45.8076 6.95998L43.464 10.3994L47.3255 8.34642L49.6957 10.4794L49.6691 6.95998H54.5426C58.271 6.93332 58.8036 10.4794 58.1378 11.8125H42.7184C41.3069 11.8125 37.1258 10.7724 39.0166 5.76018C40.7743 1.78735 44.982 -0.0524702 47.7783 0.00113767Z" fill="#234BA9"/>
+<g id="bottom">
+<path d="M32.3588 20.1976C32.705 18.5712 34.7556 15.5317 38.484 15.2917H46.1804C46.3668 15.2917 46.8835 15.2704 47.2456 14.5452L47.7516 13.1987H57.6318C57.2324 14.2741 55.7943 16.5448 52.6518 16.7315H46.5532C46.5 16.7315 45.6899 16.8463 45.3282 17.6913C44.9287 18.6245 44.2097 18.7845 43.8368 18.8111H35.9007C35.2616 18.8378 33.7702 19.0511 32.3588 20.1976Z" fill="#CB2A3D"/>
+<path d="M56.1937 16.7181C55.7943 18.3445 53.8875 21.4054 50.0952 21.5973H44.1032C43.5439 21.6507 42.9484 21.7679 42.6118 22.6105C42.2603 23.4904 41.4933 23.7037 40.9873 23.7037H30.8674C31.258 22.6372 32.7902 20.4455 35.7942 20.2109H43.5173C43.7658 20.202 44.2363 20.1842 44.6092 19.3044C44.982 18.4245 45.2217 18.1312 46.0639 18.1046H52.6252C53.1844 18.1135 54.8089 17.838 56.1937 16.7181Z" fill="#CB2A3D"/>
+</g>
+<g id="shadow">
+<path d="M49.7491 13.1987L48.3643 16.7315H46.7132C46.367 16.7493 45.6394 16.9261 45.2985 17.758L46.2871 15.2864C46.4735 15.2784 46.8996 15.1611 47.2192 14.5852L47.7518 13.1987H49.7491Z" fill="#951F23"/>
+<path d="M42.6119 22.6114L42.6274 22.5736C42.959 21.7945 43.8175 21.5982 44.2631 21.5982H45.6745L47.0594 18.1055H46.0474C45.1419 18.0788 44.8377 18.6727 44.5747 19.3844C44.4761 19.651 44.1299 20.1538 43.5973 20.2072L42.6274 22.5736C42.6221 22.586 42.617 22.5986 42.6119 22.6114Z" fill="#951F23"/>
+</g>
+</g>
+</svg>

package/src/components/core/UBtnIcon.vue

@@ -89,20 +89,24 @@ const btnClass = computed(() => {
     class="u-btn-icon"
     :class="`size-${size} ${btnClass}`"
   >
-    <q-icon
-      :color="iconColor"
-      :aria-hidden="true"
-      :class="`${iconClass} size-${size}`"
-      :size="iconSize"
-    />
-
-    <UTooltip
-      v-if="tooltip"
-      :description="tooltip"
-      :anchor="anchor"
-      :self="self"
-      :offset="offset"
-    />
+    
+    <template #default>
+      <q-icon
+        :color="iconColor"
+        :aria-hidden="true"
+        :class="`${iconClass} size-${size}`"
+        :size="iconSize"
+      />
+
+      <UTooltip
+        v-if="tooltip"
+        :description="tooltip"
+        :anchor="anchor"
+        :self="self"
+        :offset="offset"
+      />
+      <slot name="menu" />
+    </template>
   </q-btn>
 </template>
 

package/src/components/core/UBtnStd.vue

@@ -95,6 +95,7 @@ const isFullWidth = computed(() => {
           />
         </div>
       </slot>
+      <slot name="menu" />
     </template>
   </q-btn>
 </template>

package/src/components/core/UInnerLoader.vue

@@ -0,0 +1,58 @@
+<script setup>
+defineProps({
+  loading: {
+    type: Boolean,
+    required: true,
+  },
+  loadingMessage: {
+    type: String,
+    required: true,
+  },
+  image: {
+    type: String,
+    required: true,
+  },
+  spinnerColor: {
+    type: String,
+    required: false,
+  },
+  spinnerSize: {
+    type: String,
+    requried: false,
+    default: '2rem',
+  },
+  imageHeight: {
+    type: String,
+  },
+  imageWidth: {
+    type: String,
+  },
+})
+</script>
+<template>
+  <q-inner-loading :showing="loading" color="primary" v-bind="$attrs">
+    <div class="column items-center q-gutter-y-sm">
+      <img
+        class="q-my-none"
+        alt="Loader Image"
+        :src="image"
+        :width="imageWidth"
+        :height="imageHeight"
+      />
+      <div class="row items-center">
+        <div v-if="loadingMessage">
+          <span class="message q-mr-sm">{{ loadingMessage }}</span>
+        </div>
+        <q-spinner-facebook :color="spinnerColor" :size="spinnerSize" />
+      </div>
+    </div>
+  </q-inner-loading>
+</template>
+<style scoped lang="sass">
+.u-loader
+  position: relative
+  height: 100%
+.message
+  color: $dark
+  font-weight: 500
+</style>

package/src/components/core/UMenuButtonStd.vue

@@ -0,0 +1,274 @@
+<script setup>
+import { computed, ref } from 'vue'
+import UAvatar from './UAvatar.vue'
+import UBtnStd from './UBtnStd.vue'
+import UBtnIcon from './UBtnIcon.vue'
+
+const props = defineProps({
+  color: {
+    type: String,
+  },
+  label: {
+    type: String
+  },
+  iconClass: {
+    type: String,
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: (val) => ['sm', 'md', 'lg'].includes(val),
+  },
+  states: {
+    type: String,
+    default: 'Basic',
+    validator: (val) => ['Basic', 'Icon', 'Button', 'Avatar', 'Prefix'].includes(val),
+  },
+  selectedCountry: {
+    type: Object,
+  },
+  tooltip: {
+    type: String,
+  },
+  anchor: {
+    type: String,
+  },
+  self: {
+    type: String,
+  },
+  displayName: {
+    type: String,
+  },
+  avatarUrl: {
+    type: String,
+  },  
+  ariaLabel: {
+    type: String,
+  },
+   menuOffset: {
+    type: Array,
+    default: () => [4, 4],
+  },
+})
+
+const emit = defineEmits(['update-country', 'onClick'])
+
+const handleClick = () => {
+  return emit('onClick')
+}
+const selectCountry = (country) => {
+  emit('update-country', country)
+}
+const toLowerCase = (str) => str.toLowerCase()
+</script>
+
+<template>
+
+  <!-- 1. Menu button Basic state -->
+  <q-btn-dropdown
+    v-if="states === 'Basic'"
+    :aria-label="label"
+    :class="`u-mb-btn u-mb-basic size-${size}`"
+    :color="color"
+    flat
+    :menu-offset="menuOffset"
+    no-caps
+    text-color='dark'
+  >
+    <template #label>
+      <q-icon
+        v-if="iconClass"
+        :class="iconClass"
+        size='sm'
+      />
+      <div class="text-body-md q-ml-xs">{{ label }}</div>
+    </template>
+    <slot name='menu' />
+  </q-btn-dropdown>
+  
+  
+  <!-- 2. Menu button Icon state -->
+  <UBtnIcon
+    v-if="states === 'Icon'"
+    :ariaLabel="ariaLabel"
+    :anchor="anchor"
+    class="u-mb-icon"
+    :color="color"
+    :iconClass="iconClass"
+    :offset="menuOffset"
+    ref="btn-icon"
+    :size="size"
+    :self="self"
+    :tooltip="tooltip"
+    @onClick="handleClick"
+  >
+    <template v-slot:menu>
+      <slot name='menu' />
+    </template>
+  </UBtnIcon>
+
+  <!-- 3. Menu button Button state -->
+  <UBtnStd
+    v-if="states === 'Button'"
+    class="u-mb-btn"
+    :color="color"
+    :left-icon="iconClass"
+    :label="label"
+    outline
+    :size="size"
+  >
+    <template v-slot:menu>
+      <slot name='menu' />
+    </template>
+  </UBtnStd>
+
+  <!-- 4. Menu button Avatar state -->
+  <q-btn-dropdown
+    v-if="states === 'Avatar'"
+    :class="`u-mb-avatar size-${size}`"
+    :color="color"
+    content-class="u-options-menu"
+    no-caps
+    :menu-offset="menuOffset"
+    rounded
+    text-color="black"
+    unelevated
+  >
+    <template #label>
+      <q-item class="account-drop-down">
+        <q-item-section avatar class="q-pr-xs">
+          <UAvatar
+            v-if="avatarUrl"
+            :image="avatarUrl"
+            :name="displayName"
+            size="md"
+            :showIndicator="false"
+            :round="true"
+          />
+          <UAvatar
+            v-else
+            :name="displayName"
+            size="md"
+            :showIndicator="false"
+            :round="true"
+          />
+        </q-item-section>
+        <q-item-section v-if="displayName">
+          <q-item-label class="text-body-md">
+            {{ displayName }}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+    <slot name='menu' />
+  </q-btn-dropdown>
+
+
+  <!-- 5. Menu button Prefix state -->
+  <q-btn-dropdown
+    v-if="states === 'Prefix'"
+    class="u-prefix-dropdown text-body-sm"
+    :class="`btn-field-${size}`"
+    content-class="u-prefix-dropdown-list"
+    flat
+    menu-anchor="top right"
+    menu-self="bottom middle"
+    :menu-offset="menuOffset"
+    rounded
+  >
+    <template #label>
+      <q-icon
+        :class="`fi fi-${toLowerCase(selectedCountry.flag)} q-mr-xxs`"
+        :aria-label="selectedCountry.name"
+        left
+      />
+      <label class="selected-code"> {{ selectedCountry.code }}</label>
+    </template>
+    <slot name='menu' />
+  </q-btn-dropdown>
+</template>
+
+<style lang="sass">
+.u-mb-basic
+  .q-icon
+    font-size: 1.875rem
+
+.u-mb-avatar
+  padding: 0rem $xs
+  align-items: center
+  &:hover::before
+    background-color: $neutral-3
+  gap: $xs
+  .account-drop-down
+    padding: 0
+    min-height: 0
+    .q-item__section--avatar
+      min-width: 0
+  .q-btn__content
+    .q-icon
+      width:1rem
+      height:1rem
+
+.u-mb-icon
+  &:hover::before
+      background-color: $blue-1
+  &:focus
+    border: 1.5px solid $primary
+    background-color: $blue-1
+    box-shadow: 0px 0px 0px 2px $primary-transparent
+
+.u-mb-btn
+  border-radius: $xs
+  min-width: 5.5rem !important
+  &.bg-neutral
+    background-color: $neutral-3
+  &.size-sm
+    min-height: $md
+    padding: 0 $sm !important
+  &.size-md
+    min-height: $lg
+    padding: 0 $ba !important
+  &.size-lg
+    min-height: $xl
+    padding: 0 $ba !important
+
+.u-mb-avatar
+  &.size-sm
+    min-height: $md
+  &.size-md
+    min-height: $lg
+  &.size-lg
+    min-height: $xl
+
+.u-prefix-dropdown
+  border-radius: $xs 0px 0px $xs
+  border: 1.5px solid $neutral-4
+  background: $neutral-2
+  &:hover
+    border: 1.5px solid $primary
+    background-color: $neutral-2
+  &:focus
+    border: 1.5px solid $primary
+    background-color: $neutral-2
+    box-shadow: 0px 0px 0px 2px $primary-transparent
+  &.q-btn
+    height: 2rem
+    min-height: 2rem
+    padding: 0px $xs
+  .selected-code
+    width: 2rem
+  &.btn-field-sm
+    height: $md
+  &.btn-field-md
+    height: $lg
+  &.btn-field-lg
+    height: $xl
+  .q-icon.on-left
+    width: 1rem
+    height: 0.655rem
+
+  .q-btn-dropdown__arrow
+    width: 1rem
+    height: 1rem
+    margin-left: $xxs
+</style>

package/src/components/index.js

@@ -20,9 +20,11 @@ import UInputPhoneStd from './core/UInputPhoneStd.vue'
 import UInputTextStd from './core/UInputTextStd.vue'
 import UDialogStd from './core/UDialogStd.vue'
 import URadioBtn from './core/URadioBtn.vue'
+import UInnerLoader from './core/UInnerLoader.vue'
 import UMenuItem from './core/UMenuItem.vue'
 import UDrawer from './core/UDrawer.vue'
 import UMenuDropdown from './core/UMenuDropdown.vue'
+import UMenuButtonStd from './core/UMenuButtonStd.vue'
 import UBreadCrumbs from './core/UBreadCrumbs.vue'
 
 import { useNotify } from '../composables/useNotify.js'
@@ -51,7 +53,9 @@ export {
   UDialogStd,
   UInputPhoneStd,
   UMenuItem,
+  UInnerLoader,
   UDrawer,
   UMenuDropdown,
-  UBreadCrumbs,
+  UMenuButtonStd,
+  UBreadCrumbs
 }

package/src/layouts/MainLayout.vue

@@ -70,6 +70,10 @@ const components = [
     title: 'Menu Item',
     path: 'menu-item',
   },
+  {
+    title: 'Menu Button',
+    path: 'menu-button',
+  },
   {
     title: 'MultiSelect',
     path: 'multiselect-standard',
@@ -114,6 +118,10 @@ const components = [
     title: 'Table',
     path: '/table',
   },
+  {
+    title: 'Inner Loader',
+    path: '/inner-loader',
+  },
 ]
 
 const leftDrawerOpen = ref(true)

package/src/pages/InnerLoader.vue

@@ -0,0 +1,81 @@
+<script setup>
+import { ref } from 'vue'
+import UBtnStd from 'src/components/core/UBtnStd.vue'
+import ComponentBase from './ComponentBase.vue'
+import UInnerLoader from 'src/components/core/UInnerLoader.vue'
+
+const colorOptions = ['primary', 'positive', 'accent', 'warning']
+const color = ref('primary')
+const message = ref('Loaing Data')
+const image = ref('/src/assets/logo.svg')
+const spinnerSize = ref(2)
+const loading = ref(false)
+
+const htmlContent = `<UInnerLoader
+  :loading="loading"
+  :image="image"
+  :loading-message="message"
+  :spinner-color="color"
+  :spinner-size="spinnerSize"
+  :image-width="imageWidth"
+  :image-height="imageHeight"
+/>`
+
+const showLoader = () => {
+  loading.value = true
+
+  setTimeout(() => {
+    loading.value = false
+  }, 2000)
+}
+
+defineOptions({
+  name: 'InnerLoader',
+})
+</script>
+
+<template>
+  <q-page class="flex flex-center">
+    <ComponentBase figmaUrl="#">
+      <template v-slot:component>
+        <UBtnStd label="Show" color="primary" @on-click="showLoader" />
+        <div>
+          <div
+            style="height: 200px; width: 400px; position: relative"
+            class="q-mt-sm"
+          >
+            <span v-if="!loading">
+              This is a test message. When you click on the show button the
+              loader will be shown and the message will disappear, behaving like
+              if the data is being fetched.
+            </span>
+            <UInnerLoader
+              :image="image"
+              :loading="loading"
+              :loading-message="message"
+              :spinner-color="color"
+              :spinner-size="`${spinnerSize}rem`"
+            />
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:properties>
+        <div class="column q-gutter-y-lg">
+          <q-input label="Message" v-model="message" />
+          <q-input label="Spinner size (In rem)" v-model="spinnerSize" />
+
+          <q-select
+            v-model="color"
+            :options="colorOptions"
+            label="Spinner Color"
+          />
+        </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/router/routes.js

@@ -107,10 +107,18 @@ const routes = [
         path: 'menu-item',
         component: () => import('src/pages/MenuItem.vue'),
       },
+      {
+        path: 'inner-loader',
+        component: () => import('src/pages/InnerLoader.vue'),
+      },
       {
         path: 'menu-dropdown',
         component: () => import('src/pages/MenuDropdown.vue'),
       },
+      {
+        path: 'menu-button',
+        component: () => import('src/pages/MenuButton.vue'),
+      },
       {
         path: 'bread-crumbs',
         component: () => import('src/pages/BreadCrumbs.vue'),