quasar-ui-danx 0.1.2 → 0.2.1

package/dist/style.css

@@ -0,0 +1 @@
+.slide-image[data-v-ac4d9efe]{width:100%;height:100%;background:#000;display:flex;justify-content:center;align-items:center}.slide-image img[data-v-ac4d9efe]{max-height:100%;max-width:100%;object-fit:contain}.carousel[data-v-ac4d9efe] .q-carousel__navigation--bottom{position:relative;bottom:8em}.action-button[data-v-4bede0de]{position:absolute;bottom:1.5em;right:1em;z-index:1}.play-button[data-v-4bede0de]{position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;pointer-events:none}.collapsable-sidebar[data-v-38458242]{@apply overflow-y-auto scroll-smooth flex-shrink-0 border-r border-neutral-plus-5 transition-all;}.dialog-title[data-v-529ed64e]{@apply bg-gray-very-light text-gray-default font-medium uppercase text-xs px-6 py-3 border-b border-neutral-plus-5 rounded-t-md;font-family:Roboto,sans-serif;letter-spacing:.05em;box-shadow:0 -4px 12px #00000040}.dialog-content[data-v-529ed64e]{box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}body .q-tooltip.interactive-tooltip{pointer-events:auto!important;background:#fff;color:inherit;box-shadow:0 0 10px 3px #0003}[class*=list-move],[class*=list-enter-active],[class*=".list-leave-active"]{transition:all .3s cubic-bezier(.55,0,.1,1)}[class*=list-leave-active]{position:absolute!important}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.fade-list-enter-from,.fade-list-leave-to{opacity:0;transform:scaleY(.01) translate(30px)}.fade-down-list-enter-from,.fade-down-list-leave-to{opacity:0;transform-origin:top;transform:translateY(30px)}.slide-enter-active,.slide-leave-active,.slide-right-enter-active,.slide-right-leave-active{transition:all .3s linear;width:100%}.slide-right-enter-active,.slide-enter-active{position:absolute!important;top:0}.slide-enter-from{right:-120%}.slide-enter-to{right:0}.slide-leave-to{left:-120%}.slide-leave-from{left:0}.slide-right-enter-from{left:-120%}.slide-right-enter-to{left:0}.slide-right-leave-to{right:-120%}.slide-right-leave-from{right:0}.list-move[data-v-6a1edcb9],.list-enter-active[data-v-6a1edcb9],.list-leave-active[data-v-6a1edcb9]{transition:all .5s ease}.list-enter-from[data-v-6a1edcb9],.list-leave-to[data-v-6a1edcb9]{opacity:0;transform:translate(2em)}.list-leave-active[data-v-6a1edcb9]{position:absolute}.category-toggle[data-v-042cd8be]{@apply text-xs font-bold rounded-lg border border-solid border-neutral-plus-5 px-2 py-1 mx-1 cursor-pointer flex items-center;}.category-toggle.has-visible-columns[data-v-042cd8be]{@apply text-white bg-blue-base;}[data-drop-zone] .resize-handle[data-v-f53f68e8]{position:absolute;top:0;right:-.45em;width:.9em;opacity:0;transition:all .3s}[data-drop-zone]:hover .resize-handle[data-v-f53f68e8]{opacity:1}.panel-tabs[data-v-5d23285c] .q-tab{justify-content:start!important;padding:0;@apply text-left py-2.5 px-2 rounded-lg hover:bg-neutral-plus-6;}.panel-tabs[data-v-5d23285c] .q-tab .q-focus-helper,.panel-tabs[data-v-5d23285c] .q-tab .q-tab__indicator{display:none}.panel-tabs[data-v-5d23285c] .q-tab .q-tab__content{@apply p-0;}.panel-tabs[data-v-5d23285c] .q-tab.q-tab--active{@apply text-white bg-blue-base;}

package/package.json

@@ -1,55 +1,46 @@
 {
   "name": "quasar-ui-danx",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "author": "Dan <dan@flytedesk.com>",
   "description": "DanX Vue / Quasar component library",
   "license": "MIT",
-  "module": "src/index.esm.js",
-  "main": "src/index.common.js",
+  "type": "module",
   "scripts": {
-    "dev": "cd dev && yarn dev && cd ..",
-    "dev:umd": "yarn build && node build/script.open-umd.js",
-    "dev:ssr": "cd dev && yarn 'dev:ssr' && cd ..",
-    "dev:ios": "cd dev && yarn 'dev:ios' && cd ..",
-    "dev:android": "cd dev && yarn 'dev:android' && cd ..",
-    "dev:electron": "cd dev && yarn 'dev:electron' && cd ..",
-    "build": "node build/index.js",
-    "build:js": "node build/script.javascript.js",
-    "build:css": "node build/script.css.js"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/flytedan/quasar-app-extension-danx"
   },
-  "bugs": "",
-  "homepage": "",
   "devDependencies": {
-    "@quasar/app-webpack": "^3.0.0",
     "@quasar/extras": "^1.16.4",
-    "@rollup/plugin-buble": "^0.21.3",
-    "@rollup/plugin-json": "^4.0.0",
-    "@rollup/plugin-node-resolve": "^11.2.1",
-    "@rollup/plugin-replace": "^2.4.2",
+    "@types/node": "^20.12.7",
+    "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.17",
     "chalk": "^4.1.0",
     "core-js": "^3.0.0",
     "cssnano": "^4.1.10",
     "fs-extra": "^8.1.0",
-    "open": "^7.3.0",
     "postcss": "^8.1.9",
     "quasar": "^2.0.0",
-    "raw-loader": "^4.0.2",
-    "rimraf": "^3.0.0",
-    "rollup": "^2.45.0",
-    "rtlcss": "^2.6.1",
     "sass": "^1.33.0",
-    "svg-inline-loader": "^0.8.2",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3",
-    "uglify-js": "^3.13.3",
+    "tailwindcss": "^3.4.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.8",
+    "vite-svg-loader": "^5.1.0",
     "vue": "^3.0.0",
-    "vue-router": "^4.0.0",
-    "zlib": "^1.0.5"
+    "vue-router": "^4.0.0"
+  },
+  "dependencies": {
+    "@heroicons/vue": "v1",
+    "@tinymce/tinymce-vue": "^5.1.1",
+    "@vueuse/core": "^10.7.2",
+    "exifreader": "^4.21.1",
+    "gsap": "^3.12.5",
+    "luxon": "^3.4.4"
   },
   "browserslist": [
     "last 4 Chrome versions",
@@ -60,14 +51,5 @@
     "last 4 ChromeAndroid versions",
     "last 4 FirefoxAndroid versions",
     "last 4 iOS versions"
-  ],
-  "dependencies": {
-    "@heroicons/vue": "v1",
-    "@tinymce/tinymce-vue": "^5.1.1",
-    "@vueuse/core": "^10.7.2",
-    "exifreader": "^4.21.1",
-    "gsap": "^3.12.5",
-    "luxon": "^3.4.4",
-    "tailwindcss": "^3.4.1"
-  }
+  ]
 }

package/src/components/ActionTable/ActionTable.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="overflow-hidden">
+  <div class="overflow-hidden w-full">
     <ActionVnode />
-    <q-table
+    <QTable
         ref="actionTable"
         :selected="selectedRows"
         :pagination="quasarPagination"
@@ -10,7 +10,7 @@
         :rows="pagedItems?.data || []"
         selection="multiple"
         :rows-per-page-options="rowsPerPageOptions"
-        class="sticky-column sticky-header w-full !border-0"
+        class="sticky-column sticky-header w-full h-full !border-0"
         color="blue-base"
         @update:selected="$emit('update:selected-rows', $event)"
         @update:pagination="() => {}"
@@ -33,7 +33,7 @@
         />
       </template>
       <template #header-cell="rowProps">
-        <q-th
+        <QTh
             :key="rowProps.key"
             :props="rowProps"
             :data-drop-zone="`resize-column-` + rowProps.col.name"
@@ -47,7 +47,7 @@
           >
             <RowResizeIcon class="w-4 text-neutral-base" />
           </HandleDraggable>
-        </q-th>
+        </QTh>
       </template>
       <template #body-cell="rowProps">
         <ActionTableColumn
@@ -58,11 +58,12 @@
           <slot :column-name="rowProps.col.name" :row="rowProps.row" :value="rowProps.value" />
         </ActionTableColumn>
       </template>
-    </q-table>
+    </QTable>
   </div>
 </template>
 
 <script setup>
+import { QTable, QTh } from 'quasar';
 import { ref } from 'vue';
 import { getItem, setItem } from '../../helpers';
 import { DragHandleIcon as RowResizeIcon } from '../../svg';

package/src/components/ActionTable/ActionTableColumn.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-td :key="rowProps.key" :props="rowProps">
+  <q-td :key="rowProps.key" :props="rowProps" :style="columnStyle">
     <div :style="columnStyle">
       <div
           class="flex items-center flex-nowrap"

package/src/components/ActionTable/Filters/FilterFieldList.vue

@@ -43,8 +43,7 @@
 </template>
 <script setup>
 import { computed } from 'vue';
-import FilterableField from './FilterableField';
-import FilterFieldItem from './FilterFieldItem';
+import { FilterableField, FilterFieldItem } from './index';
 
 const emit = defineEmits(['update:filter']);
 const props = defineProps({

package/src/components/ActionTable/Filters/FilterListToggle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center" :class="{'w-72': showFilters}">
+  <div class="flex items-center transition-all" :class="{'w-72': showFilters, 'w-[6.5rem]': !showFilters}">
     <div class="flex-grow">
       <q-btn
           class="btn-blue-highlight"

package/src/components/ActionTable/Filters/FilterToolbarLayout.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="w-full flex justify-end items-center flex-nowrap border-b">
     <FilterListToggle
-      :show-filters="showFilters"
-      :filter="filter"
-      class="border-r p-4 flex-shrink-0"
-      @update:show-filters="$emit('update:show-filters', $event)"
-      @update:filter="$emit('update:filter', $event)"
+        :show-filters="showFilters"
+        :filter="filter"
+        class="border-r p-4 flex-shrink-0"
+        @update:show-filters="$emit('update:show-filters', $event)"
+        @update:filter="$emit('update:filter', $event)"
     />
 
     <div class="flex-grow">
@@ -20,9 +20,10 @@
   </div>
 </template>
 <script setup>
-import { FilterListToggle } from "quasar-ui-danx";
+import { QSeparator } from 'quasar';
+import { FilterListToggle } from '../Filters';
 
-defineEmits(["update:show-filters", "update:filter"]);
+defineEmits(['update:show-filters', 'update:filter']);
 defineProps({
   filter: {
     type: Object,

package/src/components/ActionTable/Filters/index.ts

@@ -1,6 +1,6 @@
-export {
-    default as CollapsableFiltersSidebar
-} from "./CollapsableFiltersSidebar.vue";
+export { default as CollapsableFiltersSidebar } from "./CollapsableFiltersSidebar.vue";
+export { default as FilterableField } from "./FilterableField.vue";
+export { default as FilterFieldItem } from "./FilterFieldItem.vue";
 export { default as FilterFieldList } from "./FilterFieldList.vue";
 export { default as FilterListToggle } from "./FilterListToggle.vue";
 export { default as FilterToolbarLayout } from "./FilterToolbarLayout.vue";

package/src/components/ActionTable/Form/Fields/BooleanField.vue

@@ -11,11 +11,11 @@
         :show-name="showName"
         :class="labelClass"
     />
-    </q-toggle>
+  </q-toggle>
 </template>
 
 <script setup>
-import FieldLabel from './FieldLabel';
+import { FieldLabel } from './index';
 
 defineEmits(['update:model-value']);
 defineProps({

package/src/components/ActionTable/Form/Fields/ConfirmPasswordField.vue

@@ -2,13 +2,15 @@
   <LabeledInput
       type="password"
       v-bind="props"
+      :name="name"
+      :model-value="modelValue"
       :rules="rules"
       @update:model-value="$emit('update:model-value', $event)"
   />
 </template>
 
 <script setup>
-import LabeledInput from './LabeledInput';
+import { LabeledInput } from './index';
 
 defineEmits(['update:model-value']);
 const props = defineProps({

package/src/components/ActionTable/Form/Fields/DateTimeField.vue

@@ -26,7 +26,7 @@
 <script setup>
 import { ref } from 'vue';
 import { fLocalizedDateTime } from '../../../../helpers';
-import DateTimePicker from './DateTimePicker';
+import { DateTimePicker } from './index';
 
 const emit = defineEmits(['update:model-value']);
 const props = defineProps({

package/src/components/ActionTable/Form/Fields/InlineDateTimeField.vue

@@ -25,7 +25,7 @@
 <script setup>
 import { PencilIcon as EditIcon } from '@heroicons/vue/solid';
 import { fLocalizedDateTime } from '../../../../helpers';
-import DateTimePicker from './DateTimePicker';
+import { DateTimePicker } from './index';
 
 const emit = defineEmits(['close', 'save', 'update:model-value']);
 defineProps({

package/src/components/ActionTable/Form/Fields/IntegerField.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import NumberField from './NumberField';
+import { NumberField } from './index';
 
 defineEmits(['update:model-value']);
 defineProps({

package/src/components/ActionTable/Form/Fields/MultiFileField.vue

@@ -64,7 +64,7 @@
 import { onMounted } from 'vue';
 import { useMultiFileUpload } from '../../../../helpers';
 import { FilePreview } from '../../../Utility';
-import FieldLabel from './FieldLabel';
+import { FieldLabel } from './index';
 
 const emit = defineEmits(['update:model-value']);
 const props = defineProps({

package/src/components/ActionTable/Form/Fields/MultiKeywordField.vue

@@ -24,8 +24,7 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue';
-import SelectField from './SelectField';
-import TextField from './TextField';
+import { SelectField, TextField } from './index';
 
 const emit = defineEmits(['update:model-value']);
 const props = defineProps({

package/src/components/ActionTable/Form/Fields/NewPasswordField.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import LabeledInput from './LabeledInput';
+import { LabeledInput } from './index';
 
 defineEmits(['update:model-value']);
 const props = defineProps({

package/src/components/ActionTable/Form/Fields/NumberField.vue

@@ -23,7 +23,7 @@
 import { useDebounceFn } from '@vueuse/core';
 import { computed, nextTick, ref, watch } from 'vue';
 import { fNumber } from '../../../../helpers';
-import FieldLabel from './FieldLabel';
+import { FieldLabel } from './index';
 
 const emit = defineEmits(['update:model-value', 'update']);
 const props = defineProps({

package/src/components/ActionTable/Form/Fields/NumberRangeField.vue

@@ -42,7 +42,7 @@ import { useDebounceFn } from '@vueuse/core';
 import { computed, ref, watch } from 'vue';
 import { fCurrency, fNumber, fPercent } from '../../../../helpers';
 import { PercentIcon } from '../../../../svg';
-import NumberField from './NumberField';
+import { NumberField } from './index';
 
 const emit = defineEmits(['update:model-value']);
 const props = defineProps({

package/src/components/ActionTable/Form/Fields/SelectWithChildrenField.vue

@@ -30,7 +30,7 @@
 <script setup>
 import { ref, watch } from 'vue';
 import { remove } from '../../../../helpers';
-import SelectField from './SelectField';
+import { SelectField } from './index';
 
 const emit = defineEmits(['update:model-value']);
 const props = defineProps({

package/src/components/ActionTable/Form/Fields/SingleFileField.vue

@@ -51,7 +51,7 @@
 import { onMounted } from 'vue';
 import { useSingleFileUpload } from '../../../../helpers';
 import { FilePreview } from '../../../Utility';
-import FieldLabel from './FieldLabel';
+import { FieldLabel } from './index';
 
 const emit = defineEmits(['update:model-value']);
 const props = defineProps({

package/src/components/ActionTable/Form/Fields/TextField.vue

@@ -26,19 +26,18 @@
             :class="labelClass"
         />
       </template>
-      </q-input>
-      <div v-if="readonly">
-        <LabelValueBlock
-            :label="label || field.label"
-            :value="modelValue"
-        />
-      </div>
+    </q-input>
+    <div v-if="readonly">
+      <LabelValueBlock
+          :label="label || field.label"
+          :value="modelValue"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
-import FieldLabel from './FieldLabel';
-import LabelValueBlock from './LabelValueBlock';
+import { FieldLabel, LabelValueBlock } from './index';
 
 defineEmits(['update:model-value', 'submit']);
 defineProps({

package/src/components/ActionTable/Form/Fields/WysiwygField.vue

@@ -26,7 +26,7 @@
 <script setup>
 import { default as TinyMceEditor } from '@tinymce/tinymce-vue';
 import { apiKey } from '../../../../vendor/tinymce-config';
-import FieldLabel from './FieldLabel';
+import { FieldLabel } from './index';
 
 defineEmits(['update:model-value']);
 defineProps({

package/src/components/ActionTable/Form/Fields/index.ts

@@ -10,6 +10,7 @@ export { default as FileUploadButton } from "./FileUploadButton.vue";
 export { default as InlineDateTimeField } from "./InlineDateTimeField.vue";
 export { default as IntegerField } from "./IntegerField.vue";
 export { default as LabeledInput } from "./LabeledInput.vue";
+export { default as LabelValueBlock } from "./LabelValueBlock.vue";
 export { default as MultiFileField } from "./MultiFileField.vue";
 export { default as MultiKeywordField } from "./MultiKeywordField.vue";
 export { default as NewPasswordField } from "./NewPasswordField.vue";

package/src/components/AuditHistory/AuditHistoryItem.vue

@@ -4,13 +4,13 @@
       <h5>{{ change.label }} ({{ change.name }})</h5>
       <div class="flex flex-nowrap items-center mt-4">
         <div class="bg-red-light line-through p-2">
-          <AdHistoryItemValue
+          <AuditHistoryItemValue
               :type="change.type"
               :value="change.oldValue"
           />
         </div>
         <div class="bg-green-plus-4 ml-2.5 p-2">
-          <AdHistoryItemValue
+          <AuditHistoryItemValue
               :type="change.type"
               :value="change.newValue"
           />
@@ -33,7 +33,7 @@
 <script setup>
 import { computed } from 'vue';
 import { fLocalizedDateTime } from '../../helpers';
-import AdHistoryItemValue from './AuditHistoryItemValue';
+import { AuditHistoryItemValue } from './index';
 
 const props = defineProps({
   item: {

package/src/components/PanelsDrawer/PanelsDrawerTabs.vue

@@ -24,7 +24,7 @@
 </template>
 <script setup>
 import { QTab } from 'quasar';
-import { RenderVnode } from 'quasar-ui-danx';
+import { RenderVnode } from '../Utility';
 
 defineEmits(['update:model-value']);
 defineProps({

package/src/components/Utility/Dialogs/InputDialog.vue

@@ -16,7 +16,7 @@
 </template>
 <script setup>
 import { ref } from 'vue';
-import ConfirmDialog from './ConfirmDialog';
+import { ConfirmDialog } from './index';
 
 defineEmits(['confirm', 'close', 'update:input']);
 const props = defineProps({

package/src/index.esm.js

@@ -1,4 +1,2 @@
-import * as VuePlugin from './vue-plugin';
-
 export * from './vue-plugin';
-export default VuePlugin;
+

package/tsconfig.json

@@ -10,6 +10,7 @@
     "strict": false,
     // Enables compatibility with Babel-imported CommonJS modules
     "esModuleInterop": true,
+    "resolveJsonModule": true,
     // Resolve modules using Node.js style
     "moduleResolution": "node",
     // Allow default imports from modules with no default export
@@ -18,6 +19,7 @@
     "experimentalDecorators": true,
     // Skip type checking of all declaration files (*.d.ts)
     "skipLibCheck": true,
+    "sourceMap": true,
     // Disallow inconsistently-cased references to the same file.
     "forceConsistentCasingInFileNames": true,
     // Base directory to resolve non-relative module names,
@@ -32,6 +34,7 @@
     "src/**/*.ts",
     "src/**/*.vue",
     "src/**/*.svg",
+    "package.json",
     "types/**/*.d.ts"
   ],
   "exclude": [

package/vite.config.js

@@ -0,0 +1,29 @@
+import vue from '@vitejs/plugin-vue';
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import svgLoader from 'vite-svg-loader';
+
+
+export default defineConfig({
+    plugins: [vue(), svgLoader()],
+    build: {
+        lib: {
+            entry: resolve(__dirname, './src/index.esm.js'),
+            name: 'Danx',
+            // the proper extensions will be added
+            fileName: (format) => `danx.${format}.js`
+        },
+        // Add rollupOptions only if you need to customize the build further
+        rollupOptions: {
+            // Externalize deps that shouldn't be bundled into your library
+            external: ['vue', 'quasar'],
+            output: {
+                // Provide globals here
+                globals: {
+                    vue: 'Vue',
+                    quasar: 'Quasar'
+                }
+            }
+        }
+    }
+});