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

package/package.json

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

package/src/components/core/UDialogStd.vue

@@ -13,6 +13,9 @@ const props = defineProps({
     type: String,
     default: 'default',
   },
+  customSize: {
+    type: String,
+  },
   headingCaption: String,
   leftIcon: String,
   closeIcon: String,
@@ -34,6 +37,11 @@ const handleBackClick = () => {
 const headerClass = computed(() => {
   return props.divider ? 'divider' : ''
 })
+
+const dialogStyle = computed(() => ({
+  '--customSize': props.customSize
+}))
+
 </script>
 
 <template>
@@ -43,6 +51,7 @@ const headerClass = computed(() => {
     :position="position"
     full-width
     :class="`dialog-${size}`"
+    :style="dialogStyle"
     v-model="model"
     v-bind="$attrs"
   >
@@ -176,6 +185,11 @@ const headerClass = computed(() => {
   .action-wrapper
     padding: $ba $ms
 
+.dialog-custom
+  .q-dialog__inner
+    padding: $ba 0
+    width: var(--customSize)
+
 .dialog-default
   .q-dialog__inner
     padding: $ba 0

package/src/layouts/MainLayout.vue

@@ -130,10 +130,6 @@ const components = [
     title: 'Inner Loader',
     path: '/inner-loader',
   },
-  {
-    title: 'Typeahead Dropdown Search',
-    path: '/typeahead-advance-search',
-  },
   {
     title: 'Overlay Loader',
     path: '/overlay-loader',

package/src/pages/Dialog.vue

@@ -17,11 +17,13 @@ const caption = ref('This is the caption')
 const divider = ref(true)
 const size = ref('half')
 const tab = ref('movie')
+const customSize = ref('75%')
 
 const htmlContent = `<UDialogStd
   :heading="heading"
   :position="position"
   :size="size"
+  :customSize="customSize"
   :headingCaption="caption"
   @onBackIconClick="handleBackclick()"
   :showActionButtons="showActionButtons"
@@ -80,6 +82,7 @@ const showDialog = () => {
           :heading="heading"
           :position="position"
           :size="size"
+          :customSize="customSize"
           :headingCaption="caption"
           @onBackIconClick="handleBackclick()"
           :showActionButtons="showActionButtons"
@@ -158,6 +161,18 @@ const showDialog = () => {
                 label="Full"
                 class="q-pa-sm"
               />
+              <q-radio
+                dense
+                v-model="size"
+                val="custom"
+                label="Custom"
+                class="q-pa-sm"
+              />
+              <q-input
+                v-if="size === 'custom'"
+                label="Custom Size"
+                v-model="customSize"
+              />
             </div>
           </div>
           <div class="column">