apostrophe 3.18.0 → 3.19.0

package/modules/@apostrophecms/schema/ui/apos/components/AposInputDateAndTime.vue

@@ -0,0 +1,115 @@
+<template>
+  <AposInputWrapper
+    :modifiers="modifiers"
+    :field="field"
+    :error="effectiveError"
+    :uid="uid"
+    :display-options="displayOptions"
+  >
+    <template #body>
+      <div class="apos-input-wrapper">
+        <AposToggle
+          v-if="!field.required"
+          v-model="disabled"
+          class="apos-toggle"
+          @toggle="toggle"
+        />
+        <input
+          v-model="date"
+          class="apos-input apos-input--date"
+          :class="{'apos-input--disabled': disabled}"
+          type="date"
+          @change="setDateAndTime"
+        >
+        <span class="apos-input--label">
+          {{ $t('apostrophe:at') }}
+        </span>
+        <input
+          v-model="time"
+          class="apos-input apos-input--time"
+          :class="{'apos-input--disabled': disabled}"
+          type="time"
+          @change="setDateAndTime"
+        >
+      </div>
+    </template>
+  </AposInputWrapper>
+</template>
+
+<script>
+import AposInputMixin from 'Modules/@apostrophecms/schema/mixins/AposInputMixin';
+import dayjs from 'dayjs';
+
+export default {
+  mixins: [ AposInputMixin ],
+  emits: [ 'return' ],
+  data() {
+    return {
+      next: (this.value && this.value.data) || null,
+      date: '',
+      time: '',
+      disabled: !this.field.required
+    };
+  },
+  mounted () {
+    this.initDateAndTime();
+  },
+  methods: {
+    toggle() {
+      this.disabled = !this.disabled;
+
+      if (this.disabled) {
+        this.next = null;
+      }
+    },
+    validate() {
+      if (this.field.required && !this.next) {
+        return 'required';
+      }
+    },
+    initDateAndTime() {
+      if (this.next) {
+        this.date = dayjs(this.next).format('YYYY-MM-DD');
+        this.time = dayjs(this.next).format('HH:mm:ss');
+        this.disabled = false;
+      }
+    },
+    setDateAndTime() {
+      if (this.date) {
+        this.next = dayjs(`${this.date} ${this.time}`.trim()).toISOString();
+        this.disabled = false;
+      } else {
+        this.next = null;
+        this.disabled = true;
+      }
+    }
+  }
+
+};
+</script>
+<style scoped lang='scss'>
+  .apos-input-wrapper {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+
+  .apos-toggle {
+    margin-right: 12px;
+  }
+
+  .apos-input {
+    padding: 10px;
+
+    &--disabled {
+      background-color: var(--a-white);
+      border-color: var(--a-base-8);
+      color: var(--a-base-4);
+    }
+
+    &--label {
+      margin: 0 12px;
+      font-family: var(--a-family-default);
+    }
+  }
+</style>

package/modules/@apostrophecms/schema/ui/apos/components/AposInputWrapper.vue

@@ -7,7 +7,7 @@
           class="apos-field__label"
           :is="labelEl" :for="uid"
         >
-          {{ $t(field.label) }}
+          {{ $t(label) }}
           <span v-if="field.required" class="apos-field__required">
             *
           </span>
@@ -53,6 +53,13 @@
 // friends, which override the `body` slot
 export default {
   name: 'AposInputWrapper',
+  inject: {
+    originalDoc: {
+      default: () => ({
+        ref: null
+      })
+    }
+  },
   props: {
     field: {
       type: Object,
@@ -92,6 +99,19 @@ export default {
     };
   },
   computed: {
+    label () {
+      const { label, publishedLabel } = this.field;
+
+      if (
+        this.originalDoc.ref &&
+        this.originalDoc.ref.lastPublishedAt &&
+        publishedLabel
+      ) {
+        return publishedLabel;
+      }
+
+      return label;
+    },
     classList: function () {
       const classes = [
         'apos-field',

package/modules/@apostrophecms/ui/ui/apos/components/AposSpinner.vue

@@ -75,7 +75,7 @@ module.exports = {
       return 'color: var(--a-primary);';
     },
     className() {
-      return `apos-spinner--${this.weight}`
+      return `apos-spinner--${this.weight}`;
     }
   },
 };
@@ -110,19 +110,19 @@ module.exports = {
 
 @keyframes clockwise {
   from {
-    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
-    to {
-    -webkit-transform: rotate(359deg);
+  to {
+    transform: rotate(359deg);
   }
 }
 
 @keyframes counterClockwise {
   from {
-    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
   }
-    to {
-    -webkit-transform: rotate(-359deg);
+  to {
+    transform: rotate(-359deg);
   }
 }
 </style>

package/modules/@apostrophecms/ui/ui/apos/components/AposToggle.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="apos-toggle__container">
+    <div
+      class="apos-toggle__slider"
+      :class="{'apos-toggle__slider--activated': !value}"
+      @click="$emit('toggle')"
+    />
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      required: true
+    }
+  },
+  emits: [ 'toggle' ],
+  data () {
+    return {
+      activated: false
+    };
+  },
+  methods: {
+    toggle() {
+      this.activated = !this.activated;
+    }
+  }
+};
+</script>
+<style scoped lang='scss'>
+  $toggleHeight: 13px;
+  $toggleWidth: $toggleHeight * 1.7;
+  $btnSize: $toggleHeight;
+
+  .apos-toggle {
+    &__slider {
+      box-sizing: content-box;
+      position: relative;
+      border-radius: 34px;
+      width: $toggleWidth;
+      height: $toggleHeight;
+      padding: 4px;
+      cursor: pointer;
+      background-color: var(--a-base-3);
+
+      &:before {
+        content: '';
+        position: absolute;
+        width: $btnSize;
+        height: $btnSize;
+        border-radius: 50%;
+        background-color: var(--a-white);
+        transition: all 0.3s ease-out;
+      }
+    }
+
+    &__slider--activated {
+      background-color: var(--a-primary);
+
+      &:before {
+        transform: translateX(calc($toggleWidth - $btnSize));
+      }
+    }
+  }
+</style>

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "apostrophe",
-  "version": "3.18.0",
+  "version": "3.19.0",
   "description": "The Apostrophe Content Management System.",
   "main": "index.js",
   "scripts": {
     "pretest": "npm run lint",
     "test": "nyc --reporter=html mocha -t 10000",
-    "lint": "eslint . && node scripts/lint-i18n"
+    "lint": "eslint . && node scripts/lint-i18n && stylelint modules/**/*.{scss,vue}"
   },
   "repository": {
     "type": "git",
@@ -105,7 +105,6 @@
     "server-destroy": "^1.0.1",
     "sluggo": "^0.3.0",
     "stylelint": "^14.6.1",
-    "stylelint-config-standard": "^25.0.0",
     "stylelint-declaration-strict-value": "^1.8.0",
     "stylelint-order": "^5.0.0",
     "stylelint-webpack-plugin": "^3.2.0",