@mythpe/quasar-ui-qui 0.3.65 → 0.3.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/datatable/MDatatable.vue +109 -106
  3. package/src/components/datatable/MDtImageColumn.vue +1 -0
  4. package/src/components/modal/MDialog.vue +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mythpe/quasar-ui-qui",
3
- "version": "0.3.65",
3
+ "version": "0.3.67",
4
4
  "description": "MyTh Quasar UI Kit App Extension",
5
5
  "author": {
6
6
  "name": "MyTh Ahmed Faiz",
package/src/components/datatable/MDatatable.vue CHANGED
@@ -159,8 +159,8 @@ const props = withDefaults(defineProps<Props>(), {
159
159
  fixed: undefined,
160
160
  imageColumns: undefined,
161
161
  imageMode: 'image',
162
- imageSize: '35px',
163
- noBackBtn: !1,
162
+ imageSize: undefined,
163
+ noBackBtn: undefined,
164
164
  backIcon: undefined,
165
165
  urlColumns: undefined,
166
166
  colorColumns: undefined,
@@ -1501,126 +1501,129 @@ defineExpose({
1501
1501
  v-model="formDialogModel"
1502
1502
  v-bind="pluginOptions.dt?.formDialogProps"
1503
1503
  >
1504
- <div class="m-form__container full-height no-wrap">
1505
- <form
1506
- class="m-form column full-height justify-between no-wrap"
1507
- @submit="defaultSubmitItem"
1508
- >
1509
- <q-card class="m-dialog-card">
1510
- <q-card-section ref="formTitle">
1511
- <q-toolbar :class="['m-container__fluid', {'q-pa-none': isSmall}]">
1504
+ <q-card class="q-dialog-plugin">
1505
+ <div class="m-form__container full-height no-wrap">
1506
+ <form
1507
+ class="m-form column full-height justify-between no-wrap"
1508
+ @submit="defaultSubmitItem"
1509
+ >
1510
+ <q-card class="m-dialog-card">
1511
+ <q-card-section ref="formTitle">
1512
+ <q-toolbar :class="['m-container__fluid', {'q-pa-none': isSmall}]">
1513
+ <slot
1514
+ :dt="datatableItemsScope"
1515
+ :form="useFormContext"
1516
+ :index="dialogItemIndex"
1517
+ :item="dialogItem"
1518
+ name="form-title-left"
1519
+ />
1520
+ <slot
1521
+ :dt="datatableItemsScope"
1522
+ :form="useFormContext"
1523
+ :index="dialogItemIndex"
1524
+ :item="dialogItem"
1525
+ name="form-title"
1526
+ >
1527
+ <q-toolbar-title>
1528
+ <template v-if="loading && !dialogItem">
1529
+ <q-skeleton width="200px" />
1530
+ </template>
1531
+ <template v-else>
1532
+ {{ getFormTitle }}
1533
+ </template>
1534
+ </q-toolbar-title>
1535
+ <q-btn
1536
+ flat
1537
+ icon="close"
1538
+ padding="3px"
1539
+ text-color="body"
1540
+ @click="closeFormDialog"
1541
+ >
1542
+ <q-tooltip class="m-dt-btn-tooltip">
1543
+ {{ __('myth.titles.close') }}
1544
+ </q-tooltip>
1545
+ </q-btn>
1546
+ </slot>
1547
+ <slot
1548
+ :dt="datatableItemsScope"
1549
+ :form="useFormContext"
1550
+ :index="dialogItemIndex"
1551
+ :item="dialogItem"
1552
+ name="form-title-right"
1553
+ />
1554
+ </q-toolbar>
1555
+ </q-card-section>
1556
+ <q-separator />
1557
+ <q-card-section
1558
+ ref="formDialogCartSection"
1559
+ :style="`height: ${($q.screen.height || 100) - 3 - (($refs.formActions as any)?.$el?.offsetHeight || 60) - (($refs.formTitle as any)?.$el?.offsetHeight || 80)}px`"
1560
+ class="scroll m-datatable__dialog-form-container"
1561
+ >
1562
+ <MContainer
1563
+ v-if="loading && !dialogItem"
1564
+ :fluid="!1"
1565
+ >
1566
+ <MRow
1567
+ v-if="loading"
1568
+ col
1569
+ >
1570
+ <template
1571
+ v-for="ai in 15"
1572
+ :key="`form-skeleton-${ai}`"
1573
+ >
1574
+ <MCol
1575
+ col="12"
1576
+ md="6"
1577
+ >
1578
+ <q-skeleton type="QInput" />
1579
+ </MCol>
1580
+ </template>
1581
+ </MRow>
1582
+ </MContainer>
1512
1583
  <slot
1584
+ v-else
1513
1585
  :dt="datatableItemsScope"
1514
1586
  :form="useFormContext"
1515
1587
  :index="dialogItemIndex"
1516
1588
  :item="dialogItem"
1517
- name="form-title-left"
1589
+ name="form"
1518
1590
  />
1591
+ </q-card-section>
1592
+ <q-separator />
1593
+ <q-card-actions
1594
+ ref="formActions"
1595
+ align="between"
1596
+ class="m-datatable-form-actions print-hide m-container__fluid"
1597
+ >
1519
1598
  <slot
1520
1599
  :dt="datatableItemsScope"
1521
1600
  :form="useFormContext"
1522
1601
  :index="dialogItemIndex"
1523
1602
  :item="dialogItem"
1524
- name="form-title"
1603
+ name="form-actions"
1525
1604
  >
1526
- <q-toolbar-title>
1527
- <template v-if="loading && !dialogItem">
1528
- <q-skeleton width="200px" />
1529
- </template>
1530
- <template v-else>
1531
- <q-btn
1532
- fab-mini
1533
- flat
1534
- icon="close"
1535
- @click="closeFormDialog"
1536
- >
1537
- <q-tooltip class="m-dt-btn-tooltip">
1538
- {{ __('myth.titles.close') }}
1539
- </q-tooltip>
1540
- </q-btn>
1541
- {{ getFormTitle }}
1542
- </template>
1543
- </q-toolbar-title>
1605
+ <MBtn
1606
+ :class="{'full-width': $q.screen.xs}"
1607
+ :label="__(`myth.titles.${isUpdateMode ? 'save' : 'store'}`)"
1608
+ :loading="loading"
1609
+ type="submit"
1610
+ v-bind="pluginOptions.dt?.dialogButtonsProps"
1611
+ />
1544
1612
  </slot>
1545
- <slot
1546
- :dt="datatableItemsScope"
1547
- :form="useFormContext"
1548
- :index="dialogItemIndex"
1549
- :item="dialogItem"
1550
- name="form-title-right"
1551
- />
1552
- </q-toolbar>
1553
- </q-card-section>
1554
- <q-separator />
1555
- <q-card-section
1556
- ref="formDialogCartSection"
1557
- :style="`height: ${($q.screen.height || 100) - 3 - (($refs.formActions as any)?.$el?.offsetHeight || 60) - (($refs.formTitle as any)?.$el?.offsetHeight || 80)}px`"
1558
- class="scroll m-datatable__dialog-form-container"
1559
- >
1560
- <MContainer
1561
- v-if="loading && !dialogItem"
1562
- :fluid="!1"
1563
- >
1564
- <MRow
1565
- v-if="loading"
1566
- col
1567
- >
1568
- <template
1569
- v-for="ai in 15"
1570
- :key="`form-skeleton-${ai}`"
1571
- >
1572
- <MCol
1573
- col="12"
1574
- md="6"
1575
- >
1576
- <q-skeleton type="QInput" />
1577
- </MCol>
1578
- </template>
1579
- </MRow>
1580
- </MContainer>
1581
- <slot
1582
- v-else
1583
- :dt="datatableItemsScope"
1584
- :form="useFormContext"
1585
- :index="dialogItemIndex"
1586
- :item="dialogItem"
1587
- name="form"
1588
- />
1589
- </q-card-section>
1590
- <q-separator />
1591
- <q-card-actions
1592
- ref="formActions"
1593
- align="between"
1594
- class="m-datatable-form-actions print-hide m-container__fluid"
1595
- >
1596
- <slot
1597
- :dt="datatableItemsScope"
1598
- :form="useFormContext"
1599
- :index="dialogItemIndex"
1600
- :item="dialogItem"
1601
- name="form-actions"
1602
- >
1603
1613
  <MBtn
1604
- :class="{'full-width': $q.screen.xs}"
1605
- :label="__(`myth.titles.${isUpdateMode ? 'save' : 'store'}`)"
1606
- :loading="loading"
1607
- type="submit"
1614
+ v-if="$q.screen.gt.sm"
1615
+ :disable="loading"
1616
+ label="myth.titles.close"
1617
+ outline
1618
+ text-color="body"
1608
1619
  v-bind="pluginOptions.dt?.dialogButtonsProps"
1620
+ @click="closeFormDialog"
1609
1621
  />
1610
- </slot>
1611
- <MBtn
1612
- v-if="$q.screen.gt.sm"
1613
- :disable="loading"
1614
- color="secondary"
1615
- label="myth.titles.close"
1616
- text-color="white"
1617
- v-bind="pluginOptions.dt?.dialogButtonsProps"
1618
- @click="closeFormDialog"
1619
- />
1620
- </q-card-actions>
1621
- </q-card>
1622
- </form>
1623
- </div>
1622
+ </q-card-actions>
1623
+ </q-card>
1624
+ </form>
1625
+ </div>
1626
+ </q-card>
1624
1627
  </MDialog>
1625
1628
 
1626
1629
  <!-- Show Dialog -->
package/src/components/datatable/MDtImageColumn.vue CHANGED
@@ -49,6 +49,7 @@ defineOptions({
49
49
  <template v-else-if="getMode === 'image'">
50
50
  <q-avatar
51
51
  :size="imageSize"
52
+ rounded
52
53
  v-bind="$attrs"
53
54
  >
54
55
  <q-img
package/src/components/modal/MDialog.vue CHANGED
@@ -45,8 +45,8 @@ defineOptions({
45
45
 
46
46
  <template>
47
47
  <q-dialog
48
- :transition-hide="$q.screen.lt.md ? slideHide : (slideProp ? slideHide : 'slide-down')"
49
- :transition-show="$q.screen.lt.md ? slideShow : (slideProp ? slideShow : 'slide-up')"
48
+ :transition-hide="$q.screen.lt.md ? slideHide : (slideProp ? slideHide : 'fade')"
49
+ :transition-show="$q.screen.lt.md ? slideShow : (slideProp ? slideShow : 'fade')"
50
50
  allow-focus-outside
51
51
  maximized
52
52
  no-backdrop-dismiss