quasar-ui-danx 0.0.11 → 0.0.12

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

@@ -1,59 +1,59 @@
 <template>
   <div
-    class="max-w-full relative overflow-auto"
-    :class="{'p-4 border rounded border-gray-medium text-center': !readonly}"
-    @dragover.prevent
-    @drop.prevent="onDrop"
+      class="max-w-full relative overflow-auto"
+      :class="{'p-4 border rounded border-gray-medium text-center': !readonly}"
+      @dragover.prevent
+      @drop.prevent="onDrop"
   >
     <FieldLabel
-      :field="field"
-      :show-name="showName"
-      class="text-sm font-semibold"
+        :field="field"
+        :show-name="showName"
+        class="text-sm font-semibold"
     />
     <div
-      v-if="!disable && !readonly"
-      class="text-sm mt-2"
+        v-if="!disable && !readonly"
+        class="text-sm mt-2"
     >
       <a
-        class="text-blue-base"
-        @click="$refs.file.click()"
+          class="text-blue-base"
+          @click="$refs.file.click()"
       >Upload</a>
       <a
-        v-if="uploadedFile"
-        class="ml-3 text-red-dark"
-        @click="onClear"
+          v-if="uploadedFile"
+          class="ml-3 text-red-dark"
+          @click="onClear"
       >Clear</a>
       <input
-        ref="file"
-        class="hidden"
-        type="file"
-        @change="onFileSelected"
+          ref="file"
+          class="hidden"
+          type="file"
+          @change="onFileSelected"
       />
     </div>
 
     <ImagePreview
-      v-if="!readonly || uploadedFile"
-      class="w-32 cursor-pointer mt-2"
-      :class="{'border border-dashed border-blue-base': !uploadedFile, 'mx-auto': !readonly}"
-      :image="uploadedFile"
-      downloadable
-      @click="!disable && $refs.file.click()"
+        v-if="!readonly || uploadedFile"
+        class="w-32 cursor-pointer mt-2"
+        :class="{'border border-dashed border-blue-base': !uploadedFile, 'mx-auto': !readonly}"
+        :image="uploadedFile"
+        downloadable
+        @click="!disable && $refs.file.click()"
     />
     <div
-      v-else-if="readonly"
-      class="py-1"
+        v-else-if="readonly"
+        class="py-1"
     >--
     </div>
   </div>
 </template>
 
 <script setup>
-import ImagePreview from "components/Common/ImagePreview";
-import FieldLabel from "danx/src/components/ActionTable/Form/Fields/FieldLabel";
-import { useSingleFileUpload } from "src/helpers/singleFileUpload";
-import { onMounted } from "vue";
+import { ImagePreview } from '@ui/components';
+import { useSingleFileUpload } from '@ui/helpers/singleFileUpload';
+import { onMounted } from 'vue';
+import FieldLabel from './FieldLabel';
 
-const emit = defineEmits(["update:model-value"]);
+const emit = defineEmits(['update:model-value']);
 const props = defineProps({
   modelValue: {
     type: [Object, String],
@@ -68,7 +68,7 @@ const props = defineProps({
   readonly: Boolean
 });
 const { onComplete, onDrop, onFileSelected, uploadedFile, onClear } = useSingleFileUpload();
-onComplete(() => emit("update:model-value", uploadedFile.value));
+onComplete(() => emit('update:model-value', uploadedFile.value));
 
 onMounted(() => {
   if (props.modelValue) {

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

@@ -1,50 +1,50 @@
 <template>
   <div>
-    <QInput
-      v-if="!readonly"
-      :data-dusk="'text-field-' + field?.id"
-      :data-testid="'text-field-' + field?.id"
-      :placeholder="field?.placeholder"
-      outlined
-      dense
-      :disable="disabled"
-      :label-slot="!noLabel"
-      :input-class="inputClass"
-      :class="parentClass"
-      stack-label
-      :type="type"
-      :model-value="modelValue"
-      :debounce="debounce"
-      @keydown.enter="$emit('submit')"
-      @update:model-value="$emit('update:model-value', $event)"
+    <q-input
+        v-if="!readonly"
+        :data-dusk="'text-field-' + field?.id"
+        :data-testid="'text-field-' + field?.id"
+        :placeholder="field?.placeholder"
+        outlined
+        dense
+        :disable="disabled"
+        :label-slot="!noLabel"
+        :input-class="inputClass"
+        :class="parentClass"
+        stack-label
+        :type="type"
+        :model-value="modelValue"
+        :debounce="debounce"
+        @keydown.enter="$emit('submit')"
+        @update:model-value="$emit('update:model-value', $event)"
     >
       <template #label>
         <FieldLabel
-          :field="field"
-          :label="label"
-          :show-name="showName"
-          :class="labelClass"
+            :field="field"
+            :label="label"
+            :show-name="showName"
+            :class="labelClass"
         />
       </template>
-    </QInput>
-    <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 LabelValueBlock from "components/Common/LabelValueBlock";
-import FieldLabel from "danx/src/components/ActionTable/Form/Fields/FieldLabel";
+import FieldLabel from './FieldLabel';
+import LabelValueBlock from './LabelValueBlock';
 
-defineEmits(["update:model-value", "submit"]);
+defineEmits(['update:model-value', 'submit']);
 defineProps({
   modelValue: {
     type: [String, Number],
-    default: ""
+    default: ''
   },
   field: {
     type: Object,
@@ -52,7 +52,7 @@ defineProps({
   },
   type: {
     type: String,
-    default: "text"
+    default: 'text'
   },
   label: {
     type: String,
@@ -60,15 +60,15 @@ defineProps({
   },
   labelClass: {
     type: String,
-    default: "text-sm text-gray-shadow"
+    default: 'text-sm text-gray-shadow'
   },
   parentClass: {
     type: String,
-    default: ""
+    default: ''
   },
   inputClass: {
     type: String,
-    default: ""
+    default: ''
   },
   noLabel: Boolean,
   showName: Boolean,

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

@@ -1,34 +1,34 @@
 <template>
   <div>
     <FieldLabel
-      v-if="!noLabel"
-      :field="field"
-      :show-name="showName"
-      class="text-sm font-semibold text-gray-shadow block mb-2"
+        v-if="!noLabel"
+        :field="field"
+        :show-name="showName"
+        class="text-sm font-semibold text-gray-shadow block mb-2"
     />
     <template v-if="readonly">
       <div
-        class="border border-gray-300 rounded-md p-2 bg-gray-100"
-        v-html="modelValue"
+          class="border border-gray-300 rounded-md p-2 bg-gray-100"
+          v-html="modelValue"
       />
     </template>
     <TinyMceEditor
-      v-else
-      class="mt-2"
-      :api-key="apiKey"
-      :disabled="disable"
-      :model-value="modelValue"
-      @update:model-value="$emit('update:model-value', $event)"
+        v-else
+        class="mt-2"
+        :api-key="apiKey"
+        :disabled="disable"
+        :model-value="modelValue"
+        @update:model-value="$emit('update:model-value', $event)"
     />
   </div>
 </template>
 
 <script setup>
-import { default as TinyMceEditor } from "@tinymce/tinymce-vue";
-import { apiKey } from "components/Cms/SlideshowEditor/ContentEditor/tinymce-config";
-import FieldLabel from "danx/src/components/ActionTable/Form/Fields/FieldLabel";
+import { apiKey } from '@ui/vendor/tinymce-config';
+import { default as TinyMceEditor } from '@tinymce/tinymce-vue';
+import FieldLabel from './FieldLabel';
 
-defineEmits(["update:model-value"]);
+defineEmits(['update:model-value']);
 defineProps({
   modelValue: {
     type: [String, Number],

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

@@ -1,23 +1,23 @@
-export { default as BooleanField } from "./BooleanField";
-export { default as ConfirmPasswordField } from "./ConfirmPasswordField";
-export { default as DateField } from "./DateField";
-export { default as DateRangeField } from "./DateRangeField";
-export { default as DateTimeField } from "./DateTimeField";
-export { default as DateTimePicker } from "./DateTimePicker";
-export { default as EditableDiv } from "./EditableDiv";
-export { default as FieldLabel } from "./FieldLabel";
-export { default as FileUploadButton } from "./FileUploadButton";
-export { default as InlineDateTimeField } from "./InlineDateTimeField";
-export { default as IntegerField } from "./IntegerField";
-export { default as LabeledInput } from "./LabeledInput";
-export { default as MultiFileField } from "./MultiFileField";
-export { default as MultiKeywordField } from "./MultiKeywordField";
-export { default as NewPasswordField } from "./NewPasswordField";
-export { default as NumberField } from "./NumberField";
-export { default as NumberRangeField } from "./NumberRangeField";
-export { default as SelectDrawer } from "./SelectDrawer";
-export { default as SelectField } from "./SelectField";
-export { default as SelectWithChildrenField } from "./SelectWithChildrenField";
-export { default as SingleFileField } from "./SingleFileField";
-export { default as TextField } from "./TextField";
-export { default as WysiwygField } from "./WysiwygField";
+export { default as BooleanField } from "./BooleanField.vue";
+export { default as ConfirmPasswordField } from "./ConfirmPasswordField.vue";
+export { default as DateField } from "./DateField.vue";
+export { default as DateRangeField } from "./DateRangeField.vue";
+export { default as DateTimeField } from "./DateTimeField.vue";
+export { default as DateTimePicker } from "./DateTimePicker.vue";
+export { default as EditableDiv } from "./EditableDiv.vue";
+export { default as FieldLabel } from "./FieldLabel.vue";
+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 MultiFileField } from "./MultiFileField.vue";
+export { default as MultiKeywordField } from "./MultiKeywordField.vue";
+export { default as NewPasswordField } from "./NewPasswordField.vue";
+export { default as NumberField } from "./NumberField.vue";
+export { default as NumberRangeField } from "./NumberRangeField.vue";
+export { default as SelectDrawer } from "./SelectDrawer.vue";
+export { default as SelectField } from "./SelectField.vue";
+export { default as SelectWithChildrenField } from "./SelectWithChildrenField.vue";
+export { default as SingleFileField } from "./SingleFileField.vue";
+export { default as TextField } from "./TextField.vue";
+export { default as WysiwygField } from "./WysiwygField.vue";

package/src/components/ActionTable/Form/RenderedForm.vue

@@ -1,37 +1,39 @@
 <template>
   <div class="rendered-form">
     <div
-      v-for="(field, index) in mappedFields"
-      :key="field.id"
-      :class="{ 'mt-4': index > 0 }"
+        v-for="(field, index) in mappedFields"
+        :key="field.id"
+        :class="{ 'mt-4': index > 0 }"
     >
       <Component
-        :is="field.component"
-        v-model="fieldValues[field.name]"
-        :field="field"
-        :label="field.label || undefined"
-        :no-label="noLabel"
-        :show-name="showName"
-        :disable="disable"
-        :readonly="readonly"
-        @update:model-value="onInput(field.name, $event)"
+          :is="field.component"
+          v-model="fieldValues[field.name]"
+          :field="field"
+          :label="field.label || undefined"
+          :no-label="noLabel"
+          :show-name="showName"
+          :disable="disable"
+          :readonly="readonly"
+          @update:model-value="onInput(field.name, $event)"
       />
     </div>
   </div>
 </template>
 <script setup>
-import BooleanField from "danx/src/components/ActionTable/Form/Fields/BooleanField";
-import DateField from "danx/src/components/ActionTable/Form/Fields/DateField";
-import DateRangeField from "danx/src/components/ActionTable/Form/Fields/DateRangeField";
-import IntegerField from "danx/src/components/ActionTable/Form/Fields/IntegerField";
-import MultiFileField from "danx/src/components/ActionTable/Form/Fields/MultiFileField";
-import NumberField from "danx/src/components/ActionTable/Form/Fields/NumberField";
-import SingleFileField from "danx/src/components/ActionTable/Form/Fields/SingleFileField";
-import TextField from "danx/src/components/ActionTable/Form/Fields/TextField";
-import WysiwygField from "danx/src/components/ActionTable/Form/Fields/WysiwygField";
-import { reactive } from "vue";
+import { reactive } from 'vue';
+import {
+  BooleanField,
+  DateField,
+  DateRangeField,
+  IntegerField,
+  MultiFileField,
+  NumberField,
+  SingleFileField,
+  TextField,
+  WysiwygField
+} from './Fields';
 
-const emit = defineEmits(["update:values"]);
+const emit = defineEmits(['update:values']);
 const props = defineProps({
   values: {
     type: Object,
@@ -63,12 +65,12 @@ const mappedFields = props.fields.map((field) => ({
   placeholder: `Enter ${field.label}`,
   ...field,
   component: FORM_FIELD_MAP[field.type],
-  default: field.type === "BOOLEAN" ? false : ""
+  default: field.type === 'BOOLEAN' ? false : ''
 }));
 
 const fieldValues = reactive(props.values || {});
 
 function onInput(key, value) {
-  emit("update:values", { ...fieldValues, [key]: value });
+  emit('update:values', { ...fieldValues, [key]: value });
 }
 </script>

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

@@ -0,0 +1,2 @@
+export * from "./Fields";
+export { default as RenderedForm } from "./RenderedForm.vue";

package/src/components/ActionTable/TableSummaryRow.vue

@@ -1,60 +1,60 @@
 <template>
-  <QTr
-    class="sticky-column-1 transition-all sticky-row"
-    :class="{'!bg-neutral-plus-7': !selectedCount, '!bg-blue-base text-white selected': selectedCount, 'opacity-50': loading}"
+  <q-tr
+      class="sticky-column-1 transition-all sticky-row"
+      :class="{'!bg-neutral-plus-7': !selectedCount, '!bg-blue-base text-white selected': selectedCount, 'opacity-50': loading}"
   >
-    <QTd
-      :colspan="stickyColspan"
-      class="font-bold transition-all"
-      :class="{'!bg-neutral-plus-7 !pl-5': !selectedCount, '!bg-blue-base text-white !pl-4': selectedCount}"
+    <q-td
+        :colspan="stickyColspan"
+        class="font-bold transition-all"
+        :class="{'!bg-neutral-plus-7 !pl-5': !selectedCount, '!bg-blue-base text-white !pl-4': selectedCount}"
     >
       <div class="flex flex-nowrap items-center">
         <div
-          v-if="selectedCount"
-          class="flex items-center"
+            v-if="selectedCount"
+            class="flex items-center"
         >
           <ClearIcon
-            class="w-6 mr-3"
-            @click="$emit('clear')"
+              class="w-6 mr-3"
+              @click="$emit('clear')"
           />
           {{ fNumber(selectedCount) }} {{ selectedLabel }}
         </div>
         <div v-else-if="itemCount">
           {{ fNumber(itemCount) }} {{ label }}
         </div>
-        <QSpinner
-          v-if="loading"
-          class="ml-3"
-          size="18"
+        <q-spinner
+            v-if="loading"
+            class="ml-3"
+            size="18"
         />
       </div>
-    </QTd>
-    <QTd
-      v-for="column in summaryColumns"
-      :key="column.name"
-      :align="column.align || 'left'"
-    >
-      <template v-if="summary">
-        {{ formatValue(column) }}
-      </template>
-    </QTd>
-  </QTr>
+      </q-td>
+      <q-td
+          v-for="column in summaryColumns"
+          :key="column.name"
+          :align="column.align || 'left'"
+      >
+        <template v-if="summary">
+          {{ formatValue(column) }}
+        </template>
+        </q-td>
+        </q-tr>
 </template>
 <script setup>
-import { XCircleIcon as ClearIcon } from "@heroicons/vue/solid";
-import { fNumber } from "danx/src/helpers/formats";
-import { computed } from "vue";
+import { fNumber } from '@ui/helpers/formats';
+import { XCircleIcon as ClearIcon } from '@heroicons/vue/solid';
+import { computed } from 'vue';
 
-defineEmits(["clear"]);
+defineEmits(['clear']);
 const props = defineProps({
   loading: Boolean,
   label: {
     type: String,
-    default: "Rows"
+    default: 'Rows'
   },
   selectedLabel: {
     type: String,
-    default: "Selected"
+    default: 'Selected'
   },
   selectedCount: {
     type: Number,
@@ -85,7 +85,7 @@ const summaryColumns = computed(() => {
 
 function formatValue(column) {
   const value = props.summary[column.name];
-  if (value === undefined) return "";
+  if (value === undefined) return '';
 
   if (column.format) {
     return column.format(value);

package/src/components/ActionTable/index.ts

@@ -1,15 +1,10 @@
-export * from "./Form/Fields";
-export * from "danx/src/components/ActionTable/tableHelpers";
+export * from "./Filters";
+export * from "./Form";
 export * from "./listActions";
+export * from "./listHelpers";
 export * from "./tableColumns";
-export { default as ActionTable } from "./ActionTable";
-export { default as BatchActionMenu } from "./BatchActionMenu";
-export {
-  default as CollapsableFiltersSidebar
-} from "danx/src/components/ActionTable/Filters/CollapsableFiltersSidebar";
-export { default as EmptyTableState } from "./EmptyTableState";
-export { default as FilterGroupList } from "./Filters/FilterGroupList";
-export { default as FilterListToggle } from "./Filters/FilterListToggle";
-export { default as RenderComponentColumn } from "./RenderComponentColumn";
-export { default as RenderedForm } from "./Form/RenderedForm";
-export { default as TableSummaryRow } from "./TableSummaryRow";
+export { default as ActionTable } from "./ActionTable.vue";
+export { default as BatchActionMenu } from "./BatchActionMenu.vue";
+export { default as EmptyTableState } from "./EmptyTableState.vue";
+export { default as RenderComponentColumn } from "./RenderComponentColumn.vue";
+export { default as TableSummaryRow } from "./TableSummaryRow.vue";