Subida del módulo y tema de PrestaShop

admin_o2w/themes/new-theme/js/app/components/checkbox.vue

@@ -0,0 +1,75 @@
+<!--*
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ *-->
+<template>
+  <div class="md-checkbox md-checkbox-inline">
+    <label>
+      <input
+        v-if="Array.isArray(checked)"
+        type="checkbox"
+        :checked="checked.includes(value)"
+        :class="classes"
+        :disabled="disabled"
+        @change="change"
+      >
+      <input
+        v-else
+        type="checkbox"
+        :checked="checked"
+        :class="classes"
+        :disabled="disabled"
+        @change="$emit('input', ($event?.target as HTMLInputElement).checked)"
+      >
+
+      <slot>
+        <!-- - Fallback content -->
+        <i class="md-checkbox-control" />
+      </slot>
+    </label>
+  </div>
+</template>
+
+<script lang="ts">
+  import {defineComponent} from 'vue';
+
+  export default defineComponent({
+    model: {
+      prop: 'checked',
+      event: 'input',
+    },
+    props: {
+      classes: {
+        type: Array,
+        default: () => ([
+          'js-tab-checkbox',
+        ]),
+      },
+      checked: {
+        required: false,
+        type: [Array, Boolean],
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+      value: {
+        required: true,
+        type: String,
+      },
+    },
+    methods: {
+      change(): void {
+        if ((<Array<string>> this.checked).includes(this.value)) {
+          (<Array<string>> this.checked).splice((<Array<string>> this.checked).indexOf(this.value), 1);
+        } else {
+          (<Array<string>> this.checked).push(this.value);
+        }
+
+        this.$emit('change');
+      },
+    },
+  });
+</script>

admin_o2w/themes/new-theme/js/app/components/checkboxes-dropdown/CheckboxesDropdown.vue

@@ -0,0 +1,131 @@
+<!--*
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ *-->
+
+<template>
+  <div class="ps-checkboxes-dropdown">
+    <div
+      class="dropdown"
+      :data-role="`filter-by-${label.toLowerCase()}-block`"
+    >
+      <button
+        :class="[
+          'btn',
+          'dropdown-toggle',
+          selectedChoiceIds.length > 0 ? 'btn-primary' : 'btn-outline-secondary',
+          'btn',
+          {disabled: this.disabled}
+        ]"
+        type="button"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false"
+        :data-role="`filter-by-${label.toLowerCase()}-btn`"
+      >
+        {{ label }} {{ nbFiles }}
+      </button>
+      <div
+        class="dropdown-menu"
+        @click="preventClose"
+      >
+        <div
+          class="md-checkbox"
+          v-for="choice in choices"
+          :key="choice.id"
+        >
+          <label class="dropdown-item">
+            <div class="md-checkbox-container">
+              <input
+                :value="choice.id"
+                :name="choice.name"
+                type="checkbox"
+                :checked="isSelected(choice)"
+                @change="toggleSelection(choice)"
+              >
+              <i class="md-checkbox-control" />
+              {{ choice.label }}
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import {defineComponent, PropType} from 'vue';
+  import {Choice} from '@app/components/checkboxes-dropdown/types';
+
+  export default defineComponent({
+    props: {
+      parentId: {
+        type: Number,
+        default: 1,
+      },
+      choices: {
+        type: Array as PropType<Choice[]>,
+        required: true,
+      },
+      selectedChoiceIds: {
+        type: Array as PropType<number[]>,
+        default: () => [],
+      },
+      label: {
+        type: String,
+        required: true,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      nbFiles(): string | null {
+        return this.selectedChoiceIds.length > 0
+          ? `(${this.selectedChoiceIds.length})`
+          : null;
+      },
+    },
+    methods: {
+      isSelected(choice: Choice): boolean {
+        return this.selectedChoiceIds.some((id) => choice.id === id);
+      },
+      toggleSelection(choice: Choice): void {
+        if (this.selectedChoiceIds.some((id) => choice.id === id)) {
+          this.$emit('unselectChoice', choice, this.parentId);
+        } else {
+          this.$emit('selectChoice', choice, this.parentId);
+        }
+      },
+      preventClose(event: Event): void {
+        event.stopPropagation();
+      },
+    },
+  });
+</script>
+
+<style lang="scss" type="text/scss">
+@import "~@scss/config/_settings.scss";
+@import "~@scss/config/_bootstrap.scss";
+
+.ps-checkboxes-dropdown {
+  margin: 0 var(--#{$cdk}size-6);
+
+  @include media-breakpoint-down(xs) {
+    margin-bottom: var(--#{$cdk}size-8);
+  }
+
+  .dropdown-item {
+    padding: var(--#{$cdk}size-8) var(--#{$cdk}size-16) var(--#{$cdk}size-8) var(--#{$cdk}size-8);
+    line-height: normal;
+    color: inherit;
+    border-bottom: 0;
+
+    .md-checkbox-container {
+      position: relative;
+      padding-left: var(--#{$cdk}size-28);
+    }
+  }
+}
+</style>

admin_o2w/themes/new-theme/js/app/components/checkboxes-dropdown/types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * For the full copyright and license information, please view the
+ * docs/licenses/LICENSE.txt file that was distributed with this source code.
+ */
+
+export interface Choice {
+  id: number,
+  name: string,
+  label: string,
+}