feat(admin): improve admin component appearance

myparcelnl · Sep 14, 2023 · e97ccc3 · e97ccc3
1 parent 878403a
commit e97ccc3
Show file tree

Hide file tree

Showing 11 changed files with 182 additions and 30 deletions.
diff --git a/views/js/backend/admin/src/components/pdk/PsCheckboxInput.vue b/views/js/backend/admin/src/components/pdk/PsCheckboxInput.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="checkbox">
+    <div class="md-checkbox md-checkbox-inline">
+      <label>
+        <input
+          :id="id"
+          v-model="model"
+          v-test="[AdminComponent.CheckboxInput, element]"
+          :disabled="element.isDisabled || element.isSuspended || element.isReadOnly"
+          :name="id"
+          :readonly="element.isReadOnly"
+          :value="element?.props?.value ?? '1'"
+          type="checkbox" />
+        <i class="md-checkbox-control"></i>
+
+        {{ element.label }}
+      </label>
+    </div>
+  </div>
+</template>
+
+<script generic="T extends CheckboxInputModelValue" lang="ts" setup>
+import {
+  AdminComponent,
+  useElementContext,
+  type CheckboxInputProps,
+  type CheckboxInputEmits,
+  type CheckboxInputModelValue,
+} from '@myparcel-pdk/admin';
+
+// eslint-disable-next-line vue/no-unused-properties
+const props = defineProps<CheckboxInputProps<T>>();
+const emit = defineEmits<CheckboxInputEmits<T>>();
+
+const {id, model} = useElementContext(props, emit);
+</script>
diff --git a/views/js/backend/admin/src/components/pdk/PsDropoffInput.vue b/views/js/backend/admin/src/components/pdk/PsDropoffInput.vue
@@ -0,0 +1,57 @@
+<template>
+  <ul
+    v-test="[AdminComponent.DropOffInput, element]"
+    class="list-group">
+    <li
+      v-for="[day, human] in Object.entries(weekdaysObject)"
+      :key="day"
+      class="list-group-item">
+      <PdkRow :columns="2">
+        <PdkCol>
+          <label>
+            {{ human }}
+
+            <PdkToggleInput
+              v-model="toggleRefs[day]"
+              :element="toggleElements[day]" />
+          </label>
+        </PdkCol>
+
+        <PdkCol>
+          <template v-if="toggleRefs[day]">
+            <label>
+              {{ translate('settings_carrier_cutoff_time') }}
+
+              <PdkTimeInput
+                v-model="cutoffRefs[day]"
+                :element="cutoffElements[day]" />
+            </label>
+          </template>
+        </PdkCol>
+      </PdkRow>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import {toRefs} from 'vue';
+import {
+  AdminComponent,
+  useDropOffInputContext,
+  useLanguage,
+  type DropOffInputProps,
+  type DropOffInputEmits,
+} from '@myparcel-pdk/admin';
+
+const props = defineProps<DropOffInputProps>();
+const emit = defineEmits<DropOffInputEmits>();
+
+const propRefs = toRefs(props);
+
+const {weekdaysObject, cutoffElements, toggleElements, toggleRefs, cutoffRefs, id} = useDropOffInputContext(
+  propRefs.modelValue?.value,
+  emit,
+);
+
+const {translate} = useLanguage();
+</script>
diff --git a/views/js/backend/admin/src/components/pdk/PsPluginSettingsWrapper.vue b/views/js/backend/admin/src/components/pdk/PsPluginSettingsWrapper.vue
@@ -2,7 +2,7 @@
   <div
     v-test="AdminComponent.PluginSettingsWrapper"
     class="card row">
-    <div class="card-body col-sm-12 pdk-plugin-settings-wrapper">
+    <div class="card-body col-sm-12">
       <slot />
     </div>
   </div>

diff --git a/views/js/backend/admin/src/components/pdk/PsProductSettingsFormGroup.vue b/views/js/backend/admin/src/components/pdk/PsProductSettingsFormGroup.vue
@@ -1,8 +1,7 @@
 <template>
-  <div
+  <PdkRow
     v-show="element.isVisible"
-    v-test="[AdminComponent.FormGroup, element]"
-    class="row">
+    v-test="[AdminComponent.FormGroup, element]">
     <template v-if="isInteractive">
       <div class="col-md-6">
         <div class="form-group">
@@ -44,7 +43,7 @@
       class="col-12 mb-4">
       <slot />
     </div>
-  </div>
+  </PdkRow>
 </template>
 
 <script lang="ts" setup>

diff --git a/views/js/backend/admin/src/components/pdk/PsRadioInput.vue b/views/js/backend/admin/src/components/pdk/PsRadioInput.vue
@@ -0,0 +1,47 @@
+<template>
+  <div
+    v-test="[AdminComponent.RadioInput, element]"
+    class="form-check form-check-radio radio">
+    <label class="form-check-label">
+      <input
+        :id="id"
+        v-model="model"
+        :disabled="element.isDisabled || element.isSuspended || element.isReadOnly"
+        :name="id"
+        :readonly="element.isReadOnly"
+        :value="element.props?.value"
+        type="radio"
+        v-bind="$attrs" />
+
+      <PdkIcon
+        v-if="element.props?.icon"
+        :icon="element.props.icon"
+        class="mr-2" />
+
+      <PdkImage
+        v-if="element.props?.image"
+        :alt="element.label"
+        :src="element.props.image"
+        class="mr-2"
+        width="24" />
+
+      <i class="form-check-round" />
+
+      {{ element.label }}
+    </label>
+  </div>
+</template>
+
+<script lang="ts">
+export default {inheritAttrs: false};
+</script>
+
+<script lang="ts" setup>
+import {AdminComponent, useElementContext, type RadioInputProps, type RadioInputEmits} from '@myparcel-pdk/admin';
+
+// eslint-disable-next-line vue/no-unused-properties
+const props = defineProps<RadioInputProps>();
+const emit = defineEmits<RadioInputEmits>();
+
+const {id, model} = useElementContext(props, emit);
+</script>
diff --git a/views/js/backend/admin/src/components/pdk/PsRow.vue b/views/js/backend/admin/src/components/pdk/PsRow.vue
@@ -1,19 +1,26 @@
 <template>
   <div
     v-test="AdminComponent.Row"
-    :class="{
-      'mypa-gap-4': !collapseGutters,
-    }"
-    class="mypa-cols-auto mypa-grid mypa-grid-flow-col">
+    :class="classes"
+    class="mypa-grid mypa-grid-flow-col">
     <slot />
   </div>
 </template>
 
 <script lang="ts" setup>
+import {computed} from 'vue';
 import {AdminComponent} from '@myparcel-pdk/admin';
 
-defineProps<{
+const props = defineProps<{
   collapseGutters: boolean;
   columns?: number | string;
 }>();
+
+const classes = computed(() => {
+  return {
+    'mypa-gap-4': !props.collapseGutters,
+    'mypa-cols-auto': !props.columns,
+    'mypa-grid-cols-2': props.columns === 2,
+  };
+});
 </script>
diff --git a/views/js/backend/admin/src/components/pdk/PsSettingsDivider.vue b/views/js/backend/admin/src/components/pdk/PsSettingsDivider.vue
@@ -1,15 +1,17 @@
 <template>
-  <div v-test="AdminComponent.SettingsDivider">
+  <div
+    v-test="AdminComponent.SettingsDivider"
+    class="mb-0 pb-0">
     <PdkHeading
       v-if="element.props.heading"
       :level="element.props.level"
-      class="bg-transparent card-header mt-3 mx-0">
+      class="card-header">
       {{ translate(element.props.heading) }}
     </PdkHeading>
 
     <p
       v-if="element.props.content && has(element.props.content)"
-      class="card-text"
+      class="card-block text-muted"
       v-text="translate(element.props.content)" />
   </div>
 </template>

diff --git a/views/js/backend/admin/src/components/pdk/PsTabNavButtonWrapper.vue b/views/js/backend/admin/src/components/pdk/PsTabNavButtonWrapper.vue
@@ -1,7 +1,7 @@
 <template>
   <ul
     v-test="AdminComponent.TabNavButtonWrapper"
-    class="nav nav-pills">
+    class="mb-2 nav nav-pills">
     <slot />
   </ul>
 </template>

diff --git a/views/js/backend/admin/src/components/pdk/PsTriStateInput.vue b/views/js/backend/admin/src/components/pdk/PsTriStateInput.vue
@@ -1,10 +1,9 @@
 <template>
-  <div
+  <PdkRow
     v-test="[AdminComponent.TriStateInput, element]"
-    :class="config?.cssUtilities?.displayFlex"
-    class="row">
+    :class="config?.cssUtilities?.displayFlex">
     <div class="col-md-6">
-      <div class="row">
+      <PdkRow>
         <div class="col-4">
           <input
             v-model="model"
@@ -22,7 +21,6 @@
             :class="config?.cssUtilities?.displayFlex"
             :size="Size.ExtraSmall"
             :title="inheritElement?.label"
-            class="!mypa-float-none !mypa-ml-1"
             @click="inheritModel = !inheritModel">
             <div>
               <i
@@ -35,13 +33,13 @@
             <PdkCheckboxInput
               v-model="inheritModel"
               :element="{...inheritElement, label: undefined}"
-              class="mypa-sr-only"
+              class="sr-only"
               tabindex="-1" />
           </PdkButton>
         </div>
-      </div>
+      </PdkRow>
     </div>
-  </div>
+  </PdkRow>
 </template>
 
 <script lang="ts" setup>

diff --git a/views/js/backend/admin/src/components/pdk/index.ts b/views/js/backend/admin/src/components/pdk/index.ts
@@ -1,5 +1,9 @@
+export {default as PsCheckboxInput} from './PsCheckboxInput.vue';
+
 export {default as PsDropdownButton} from './PsDropdownButton.vue';
 
+export {default as PsDropoffInput} from './PsDropoffInput.vue';
+
 export {default as PsFormGroup} from './PsFormGroup.vue';
 
 export {default as PsIcon} from './PsIcon.vue';
@@ -10,6 +14,8 @@ export {default as PsPluginSettingsWrapper} from './PsPluginSettingsWrapper.vue'
 
 export {default as PsProductSettingsFormGroup} from './PsProductSettingsFormGroup.vue';
 
+export {default as PsRadioInput} from './PsRadioInput.vue';
+
 export {default as PsRow} from './PsRow.vue';
 
 export {default as PsSelectInput} from './PsSelectInput.vue';

diff --git a/views/js/backend/admin/src/main.ts b/views/js/backend/admin/src/main.ts
@@ -2,27 +2,24 @@ import './assets/scss/index.scss';
 import {
   DefaultCheckboxGroup,
   DefaultCurrencyInput,
-  DefaultDropOffInput,
   DefaultHeading,
   DefaultLink,
   DefaultLoader,
   DefaultNumberInput,
-  DefaultRadioGroup,
   DefaultTable,
   DefaultTableCol,
   DefaultTableRow,
   DefaultTimeInput,
+  DefaultRadioGroup,
 } from '@myparcel-pdk/admin-preset-default';
 import {
   Bootstrap4Box,
   Bootstrap4Button,
   Bootstrap4ButtonGroup,
-  Bootstrap4CheckboxInput,
   Bootstrap4Col,
   Bootstrap4Image,
   Bootstrap4Modal,
   Bootstrap4Notification,
-  Bootstrap4RadioInput,
   Bootstrap4TextInput,
   bootstrap4Config,
 } from '@myparcel-pdk/admin-preset-bootstrap4';
@@ -42,6 +39,9 @@ import {
   PsMultiSelectInput,
   PsSelectInput,
   PsTriStateInput,
+  PsRadioInput,
+  PsCheckboxInput,
+  PsDropoffInput,
 } from './components';
 
 // eslint-disable-next-line max-lines-per-function
@@ -54,11 +54,11 @@ window.onload = () => {
       PdkButton: Bootstrap4Button,
       PdkButtonGroup: Bootstrap4ButtonGroup,
       PdkCheckboxGroup: DefaultCheckboxGroup,
-      PdkCheckboxInput: Bootstrap4CheckboxInput,
+      PdkCheckboxInput: PsCheckboxInput,
       PdkCodeEditor: PsTextArea,
       PdkCol: Bootstrap4Col,
       PdkCurrencyInput: DefaultCurrencyInput,
-      PdkDropOffInput: DefaultDropOffInput,
+      PdkDropOffInput: PsDropoffInput,
       PdkDropdownButton: PsDropdownButton,
       PdkFormGroup: PsFormGroup,
       PdkHeading: DefaultHeading,
@@ -72,7 +72,7 @@ window.onload = () => {
       PdkNumberInput: DefaultNumberInput,
       PdkPluginSettingsWrapper: PsPluginSettingsWrapper,
       PdkRadioGroup: DefaultRadioGroup,
-      PdkRadioInput: Bootstrap4RadioInput,
+      PdkRadioInput: PsRadioInput,
       PdkRow: PsRow,
       PdkSelectInput: PsSelectInput,
       PdkSettingsDivider: PsSettingsDivider,
@@ -91,7 +91,7 @@ window.onload = () => {
     formConfig: {
       form: {
         attributes: {
-          class: 'form-horizontal py-4',
+          class: 'form-horizontal',
         },
       },
     },