v176 - 343

package.json

@@ -1 +1 @@
-{"name":"weweb-front","version":"4.0.0","private":true,"type":"module","scripts":{"serve":"vite","build":"vite build","postbuild":"node ./postbuild.js"},"dependencies":{"@vueuse/head":"2.0.0","axios":"1.9.0","html-escaper":"3.0.3","lodash":"4.17.21","pinia":"3.0.2","short-unique-id":"5.3.2","tiny-emitter":"2.1.0","uuid":"11.1.0","vue":"3.5.13","vue-cookie-next":"1.3.0","vue-meta":"2.4.0","vue-router":"4.5.1","vuex":"4.1.0","dayjs":"1.11.0","@supabase/supabase-js":"2.50.3","qs":"^6.14.0","@vueform/multiselect":"2.6.2","vue-ellipse-progress":"^2.1.1","@vueuse/core":"^13.0.0","@vuepic/vue-datepicker":"3.6.8","date-fns":"4.1.0","diff":"^5.1.0","animejs":"^3.2.2","marked":"^14.1.2","medium-zoom":"^1.0.6","prismjs":"^1.23.0","@tiptap/extension-color":"2.8.0","@tiptap/extension-image":"2.8.0","@tiptap/extension-link":"2.8.0","@tiptap/extension-mathematics":"2.26.1","@tiptap/extension-mention":"2.8.0","@tiptap/extension-placeholder":"2.8.0","@tiptap/extension-table":"2.8.0","@tiptap/extension-table-cell":"2.8.0","@tiptap/extension-table-header":"2.8.0","@tiptap/extension-table-row":"2.8.0","@tiptap/extension-task-item":"2.8.0","@tiptap/extension-task-list":"2.8.0","@tiptap/extension-text-align":"2.8.0","@tiptap/extension-text-style":"2.8.0","@tiptap/extension-underline":"2.8.0","@tiptap/pm":"2.8.0","@tiptap/starter-kit":"2.8.0","@tiptap/suggestion":"2.8.0","@tiptap/vue-3":"2.8.0","katex":"^0.16.22","prosemirror-commands":"1.5.0","prosemirror-dropcursor":"1.5.0","prosemirror-gapcursor":"1.3.1","prosemirror-history":"1.3.0","prosemirror-keymap":"1.2.0","prosemirror-schema-list":"1.2.2","tiptap-markdown":"^0.8.10","lodash-es":"^4.17.21"},"devDependencies":{"@vitejs/plugin-vue":"5.2.4","autoprefixer":"10.4.21","handlebars":"4.7.8","sass-embedded":"1.89.0","vite":"6.3.5","vite-plugin-node-polyfills":"0.23.0"},"browserslist":["last 3 years"]}
+{"name":"weweb-front","version":"4.0.0","private":true,"type":"module","scripts":{"serve":"vite","build":"vite build","postbuild":"node ./postbuild.js"},"dependencies":{"@vueuse/head":"2.0.0","axios":"1.9.0","html-escaper":"3.0.3","lodash":"4.17.21","pinia":"3.0.2","short-unique-id":"5.3.2","tiny-emitter":"2.1.0","uuid":"11.1.0","vue":"3.5.13","vue-cookie-next":"1.3.0","vue-meta":"2.4.0","vue-router":"4.5.1","vuex":"4.1.0","dayjs":"1.11.0","@supabase/supabase-js":"2.50.3","qs":"^6.14.0","@vueform/multiselect":"2.6.2","vue-ellipse-progress":"^2.1.1","@vueuse/core":"^13.0.0","diff":"^5.1.0","animejs":"^3.2.2","marked":"^14.1.2","medium-zoom":"^1.0.6","prismjs":"^1.23.0","@tiptap/extension-color":"2.8.0","@tiptap/extension-image":"2.8.0","@tiptap/extension-link":"2.8.0","@tiptap/extension-mathematics":"2.26.1","@tiptap/extension-mention":"2.8.0","@tiptap/extension-placeholder":"2.8.0","@tiptap/extension-table":"2.8.0","@tiptap/extension-table-cell":"2.8.0","@tiptap/extension-table-header":"2.8.0","@tiptap/extension-table-row":"2.8.0","@tiptap/extension-task-item":"2.8.0","@tiptap/extension-task-list":"2.8.0","@tiptap/extension-text-align":"2.8.0","@tiptap/extension-text-style":"2.8.0","@tiptap/extension-underline":"2.8.0","@tiptap/pm":"2.8.0","@tiptap/starter-kit":"2.8.0","@tiptap/suggestion":"2.8.0","@tiptap/vue-3":"2.8.0","katex":"^0.16.22","prosemirror-commands":"1.5.0","prosemirror-dropcursor":"1.5.0","prosemirror-gapcursor":"1.3.1","prosemirror-history":"1.3.0","prosemirror-keymap":"1.2.0","prosemirror-schema-list":"1.2.2","tiptap-markdown":"^0.8.10","lodash-es":"^4.17.21","@vuepic/vue-datepicker":"3.6.8","date-fns":"4.1.0"},"devDependencies":{"@vitejs/plugin-vue":"5.2.4","autoprefixer":"10.4.21","handlebars":"4.7.8","sass-embedded":"1.89.0","vite":"6.3.5","vite-plugin-node-polyfills":"0.23.0"},"browserslist":["last 3 years"]}

public/data/cf9f551f-e733-4934-a682-535575cb7c70.json

@@ -1 +1 @@
-{"cacheVersion":175,"page":{"id":"cf9f551f-e733-4934-a682-535575cb7c70","paths":{"en":"promo","default":"promo"},"cmsDataSetPath":null,"workflows":[]},"sections":{"4a2188f6-d98c-4150-9ba7-5918c72f3421":{"uid":"4a2188f6-d98c-4150-9ba7-5918c72f3421","linkId":"416695e7-e54e-4897-9f9a-befeb223f1b0","_state":{"style":{"default":{}}},"content":{"default":{"wwObjects":[],"_ww-layout_alignItems":"flex-start","_ww-layout_flexDirection":"column"}},"sectionBaseId":"99586bd3-2b15-4d6b-a025-6a50d07ca845","sectionTitle":"Section"}},"wwObjects":{},"collections":[],"variables":[],"workflows":[],"formulas":[],"libraryComponents":[]}
+{"cacheVersion":176,"page":{"id":"cf9f551f-e733-4934-a682-535575cb7c70","paths":{"en":"promo","default":"promo"},"cmsDataSetPath":null,"workflows":[]},"sections":{"4a2188f6-d98c-4150-9ba7-5918c72f3421":{"uid":"4a2188f6-d98c-4150-9ba7-5918c72f3421","linkId":"416695e7-e54e-4897-9f9a-befeb223f1b0","_state":{"style":{"default":{}}},"content":{"default":{"wwObjects":[],"_ww-layout_alignItems":"flex-start","_ww-layout_flexDirection":"column"}},"sectionBaseId":"99586bd3-2b15-4d6b-a025-6a50d07ca845","sectionTitle":"Section"}},"wwObjects":{},"collections":[],"variables":[],"workflows":[],"formulas":[],"libraryComponents":[]}

public/manifest.json

@@ -1 +1 @@
-{"name":"Образовательная платформа Meetguru","short_name":"Образовательная платформа Meetguru","icons":[{"src":"images/48-favicon.png?_wwcv=175","type":"image/png","sizes":"48x48"},{"src":"images/72-favicon.png?_wwcv=175","type":"image/png","sizes":"72x72"},{"src":"images/96-favicon.png?_wwcv=175","type":"image/png","sizes":"96x96"},{"src":"images/128-favicon.png?_wwcv=175","type":"image/png","sizes":"128x128"},{"src":"images/144-favicon.png?_wwcv=175","type":"image/png","sizes":"144x144"},{"src":"images/152-favicon.png?_wwcv=175","type":"image/png","sizes":"152x152"},{"src":"images/192-favicon.png?_wwcv=175","type":"image/png","sizes":"192x192"},{"src":"images/256-favicon.png?_wwcv=175","type":"image/png","sizes":"256x256"},{"src":"images/384-favicon.png?_wwcv=175","type":"image/png","sizes":"384x384"},{"src":"images/512-favicon.png?_wwcv=175","type":"image/png","sizes":"512x512"}],"start_url":"/","display":"fullscreen","scope":"/","background_color":"#FFFFFF","theme_color":"#FFFFFF"}
+{"name":"Образовательная платформа Meetguru","short_name":"Образовательная платформа Meetguru","icons":[{"src":"images/48-favicon.png?_wwcv=176","type":"image/png","sizes":"48x48"},{"src":"images/72-favicon.png?_wwcv=176","type":"image/png","sizes":"72x72"},{"src":"images/96-favicon.png?_wwcv=176","type":"image/png","sizes":"96x96"},{"src":"images/128-favicon.png?_wwcv=176","type":"image/png","sizes":"128x128"},{"src":"images/144-favicon.png?_wwcv=176","type":"image/png","sizes":"144x144"},{"src":"images/152-favicon.png?_wwcv=176","type":"image/png","sizes":"152x152"},{"src":"images/192-favicon.png?_wwcv=176","type":"image/png","sizes":"192x192"},{"src":"images/256-favicon.png?_wwcv=176","type":"image/png","sizes":"256x256"},{"src":"images/384-favicon.png?_wwcv=176","type":"image/png","sizes":"384x384"},{"src":"images/512-favicon.png?_wwcv=176","type":"image/png","sizes":"512x512"}],"start_url":"/","display":"fullscreen","scope":"/","background_color":"#FFFFFF","theme_color":"#FFFFFF"}

public/serviceworker.js

@@ -1,4 +1,4 @@
-const version = 175;
+const version = 176;
 self.addEventListener('install', event => {
     // eslint-disable-next-line no-console
     console.log(`Service worker v${version} installed`);

src/components/elements/element-985570fc-b3c0-4566-8004-82ab3b30a11d/src/wwElement.vue

@@ -1,220 +1,241 @@
 <template>
-    <div>
+  <div>
-        <DatePicker
+    <DatePicker
-            ref="wwDatePicker"
+      ref="wwDatePicker"
-            class="ww-date-time-picker"
+      class="ww-date-time-picker"
-            :class="[
+      :class="[
-                { 'calendar-only': content.enableCalendarOnly },
+        { 'calendar-only': content.enableCalendarOnly },
-                content.enableCalendarOnly && content.calendarOnlyFit,
+        content.enableCalendarOnly && content.calendarOnlyFit,
-            ]"
+      ]"
-            :day-names="customDayNames"
+      :day-names="customDayNames"
-            :model-value="formatedValue"
+      :model-value="formatedValue"
-            @update:model-value="handleSelection"
+      @update:model-value="handleSelection"
-            :format-locale="formatLocale"
+      :format-locale="formatLocale"
-            :format="previewFormat"
+      :format="previewFormat"
-            :clearable="false"
+      :clearable="false"
-            :locale="locale"
+      :locale="locale"
-            :time-picker="content.dateMode === 'time'"
+      :time-picker="content.dateMode === 'time'"
-            :month-picker="content.dateMode === 'month'"
+      :month-picker="content.dateMode === 'month'"
-            :year-picker="content.dateMode === 'year'"
+      :year-picker="content.dateMode === 'year'"
-            :week-picker="content.dateMode === 'week'"
+      :week-picker="content.dateMode === 'week'"
-            :range="content.selectionMode === 'range'"
+      :range="content.selectionMode === 'range'"
-            :multi-dates="content.selectionMode === 'multi'"
+      :multi-dates="content.selectionMode === 'multi'"
-            :multi-dates-limit="content.multiDatesLimit ? content.multiDatesLimit : null"
+      :multi-dates-limit="
-            :auto-range="content.rangeMode === 'auto' ? content.autoRange : null"
+        content.multiDatesLimit ? content.multiDatesLimit : null
-            :partial-range="
+      "
-                content.enableCalendarOnly && content.rangeMode === 'free'
+      :auto-range="content.rangeMode === 'auto' ? content.autoRange : null"
-                    ? true
+      :partial-range="
-                    : content.rangeMode === 'free'
+        content.enableCalendarOnly && content.rangeMode === 'free'
-                    ? content.enablePartialRange
+          ? true
-                    : null
+          : content.rangeMode === 'free'
-            "
+          ? content.enablePartialRange
-            :min-range="content.rangeMode === 'minmax' ? content.minRange : null"
+          : null
-            :max-range="content.rangeMode === 'minmax' ? content.maxRange : null"
+      "
-            :multi-calendars="content.enableMultiCalendars ? content.multiCalendars : false"
+      :min-range="content.rangeMode === 'minmax' ? content.minRange : null"
-            :multi-calendars-solo="content.multiCalendarsSolo"
+      :max-range="content.rangeMode === 'minmax' ? content.maxRange : null"
-            :inline="content.enableCalendarOnly"
+      :multi-calendars="
-            :vertical="content.orientation === 'vertical'"
+        content.enableMultiCalendars ? content.multiCalendars : false
-            :enable-time-picker="content.dateMode === 'datetime' || content.dateMode === 'time'"
+      "
-            :enable-seconds="content.enableSeconds"
+      :multi-calendars-solo="content.multiCalendarsSolo"
-            :is-24="content.use24"
+      :inline="content.enableCalendarOnly"
-            :autoApply="content.autoApply"
+      :vertical="content.orientation === 'vertical'"
-            :close-on-auto-apply="content.closeOnAutoApply"
+      :enable-time-picker="
-            :flow="content.enableFlow ? content.flowSteps : null"
+        content.dateMode === 'datetime' || content.dateMode === 'time'
-            :timezone="timezone"
+      "
-            :week-numbers="content.weekNumbers === 'none' ? null : content.weekNumbers"
+      :enable-seconds="content.enableSeconds"
-            :hide-offset-dates="content.hideOffsetDates"
+      :is-24="content.use24"
-            :min-date="content.minDate"
+      :autoApply="content.autoApply"
-            :max-date="content.maxDate"
+      :close-on-auto-apply="content.closeOnAutoApply"
-            :prevent-min-max-navigation="content.preventMinMaxNavigation"
+      :flow="content.enableFlow ? content.flowSteps : null"
-            :start-date="content.startDate"
+      @flow-step="handleFlowStep"
-            :week-start="content.weekStart"
+      :timezone="timezone"
-            :ignore-time-validation="content.ignoreTimeValidation"
+      :week-numbers="
-            :disable-month-year-select="content.disableMonthYearSelect"
+        content.weekNumbers === 'none' ? null : content.weekNumbers
-            :allowed-dates="content.allowedDates"
+      "
-            :disabled-dates="content.disabledDates"
+      :hide-offset-dates="content.hideOffsetDates"
-            :disabled-week-days="content.disabledWeekDays"
+      :min-date="content.minDate"
-            :no-disabled-range="content.noDisabledRange"
+      :max-date="content.maxDate"
-            :model-type="modelType"
+      :prevent-min-max-navigation="content.preventMinMaxNavigation"
-            :position="content.menuPosition || 'center'"
+      :start-date="content.startDate"
-            :teleport=" (content.enableCalendarOnly || content.stickedDatePicker) ? null : body"
+      :week-start="content.weekStart"
-            :dpStyle="{ ...themeStyle }"
+      :ignore-time-validation="content.ignoreTimeValidation"
-            :readonly="isReadOnly || isEditing"
+      :disable-month-year-select="content.disableMonthYearSelect"
-            :key="dpKey"
+      :allowed-dates="content.allowedDates"
+      :disabled-dates="content.disabledDates"
+      :disabled-week-days="content.disabledWeekDays"
+      :no-disabled-range="content.noDisabledRange"
+      :model-type="modelType"
+      :position="content.menuPosition || 'center'"
+      :teleport="
+        content.enableCalendarOnly || content.stickedDatePicker ? null : body
+      "
+      :dpStyle="{ ...themeStyle }"
+      :readonly="isReadOnly || isEditing"
+      :key="dpKey"
+    >
+      <template #dp-input="{ value }">
+        <wwLayoutItemContext
+          :index="0"
+          :item="null"
+          :data="{ preview: value, value: formatOutputValue(formatedValue) }"
+          is-repeat
         >
-            <template #dp-input="{ value }">
+          <wwLayout path="triggerZone" />
-                <wwLayoutItemContext
+        </wwLayoutItemContext>
-                    :index="0"
+      </template>
-                    :item="null"
+      <template #action-select>
-                    :data="{ preview: value, value: formatOutputValue(formatedValue) }"
+        <wwElement v-bind="content.actionSelectElement" @click="selectDate" />
-                    is-repeat
+      </template>
-                >
+      <template #left-sidebar v-if="content.enableLeftSidebar">
-                    <wwLayout path="triggerZone" />
+        <wwLayout path="leftSidebarZone" />
-                </wwLayoutItemContext>
+      </template>
-            </template>
+      <template #right-sidebar v-if="content.enableRightSidebar">
-            <template #action-select>
+        <wwLayout path="rightSidebarZone" />
-                <wwElement v-bind="content.actionSelectElement" @click="selectDate" />
+      </template>
-            </template>
+    </DatePicker>
-            <template #left-sidebar v-if="content.enableLeftSidebar">
+    <input
-                <wwLayout path="leftSidebarZone" />
+      class="required-handler"
-            </template>
+      type="text"
-            <template #right-sidebar v-if="content.enableRightSidebar">
+      :required="content.required"
-                <wwLayout path="rightSidebarZone" />
+      :value="formatedValue"
-            </template>
+    />
-        </DatePicker>
+  </div>
-        <input class="required-handler" type="text" :required="content.required" :value="formatedValue" />
-    </div>
 </template>
 
 <script>
 import DatePicker from "./vue-datepicker.js";
-import * as DateFnsLocal from 'date-fns/locale';
+import * as DateFnsLocal from "date-fns/locale";
 import "./main.css";
 import { computed, ref } from "vue";
 
 export default {
-    components: {
+  components: {
-        DatePicker,
+    DatePicker,
-    },
+  },
-    emits: ["update:content", "add-state", "remove-state", "trigger-event"],
+  emits: ["update:content", "add-state", "remove-state", "trigger-event"],
-    props: {
+  props: {
-        content: { type: Object, required: true },
+    content: { type: Object, required: true },
-        uid: { type: String, required: true },
+    uid: { type: String, required: true },
-        wwElementState: { type: Object, required: true },
+    wwElementState: { type: Object, required: true },
-    },
+  },
-    setup(props) {
+  setup(props) {
-        const initValue = computed(() =>
+    const initValue = computed(() =>
-            props.content.selectionMode === "single"
+      props.content.selectionMode === "single"
-                ? props.content.initValueSingle || null
+        ? props.content.initValueSingle || null
-                : props.content.selectionMode === "range"
+        : props.content.selectionMode === "range"
-                ? {
+        ? {
-                      start: props.content.initValueRangeStart || null,
+            start: props.content.initValueRangeStart || null,
-                      end: props.content.initValueRangeEnd || null,
+            end: props.content.initValueRangeEnd || null,
-                  }
+          }
-                : Array.isArray(props.content.initValueMulti)
+        : Array.isArray(props.content.initValueMulti)
-                ? props.content.initValueMulti
+        ? props.content.initValueMulti
-                : []
+        : []
-        );
+    );
-        const { value: variableValue, setValue } = wwLib.wwVariable.useComponentVariable({
+    const { value: variableValue, setValue } =
-            uid: props.uid,
+      wwLib.wwVariable.useComponentVariable({
-            name: "value",
+        uid: props.uid,
-            defaultValue: initValue,
+        name: "value",
-        });
+        defaultValue: initValue,
+      });
 
-        const body = wwLib.getFrontDocument().body;
+    const body = wwLib.getFrontDocument().body;
 
-        const wwDatePicker = ref(null);
+    const wwDatePicker = ref(null);
-        const selectDate = () => {
+    const selectDate = () => {
-            wwDatePicker.value.selectDate();
+      wwDatePicker.value.selectDate();
-        };
+    };
 
-        return {
+    return {
-            variableValue,
+      variableValue,
-            setValue,
+      setValue,
-            body,
+      body,
-            initValue,
+      initValue,
-            wwDatePicker,
+      wwDatePicker,
-            selectDate,
+      selectDate,
-        };
+    };
+  },
+  watch: {
+    initValue(newValue, oldValue) {
+      if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return;
+      this.setValue(newValue);
+      this.$emit("trigger-event", {
+        name: "initValueChange",
+        event: { value: newValue },
+      });
     },
-    watch: {
+    isReadOnly: {
-        initValue(newValue, oldValue) {
+      immediate: true,
-            if (JSON.stringify(newValue) === JSON.stringify(oldValue)) return;
+      handler(value) {
-            this.setValue(newValue);
+        if (value) {
-            this.$emit("trigger-event", {
+          this.$emit("add-state", "readonly");
-                name: "initValueChange",
+        } else {
-                event: { value: newValue },
+          this.$emit("remove-state", "readonly");
-            });
+        }
-        },
+      },
-        isReadOnly: {
-            immediate: true,
-            handler(value) {
-                if (value) {
-                    this.$emit("add-state", "readonly");
-                } else {
-                    this.$emit("remove-state", "readonly");
-                }
-            },
-        },
     },
-    computed: {
+  },
-        isEditing() {
+  computed: {
-            // eslint-disable-next-line no-unreachable
+    isEditing() {
-            return false;
+      // eslint-disable-next-line no-unreachable
-        },
+      return false;
-        /* https://github.com/date-fns/date-fns/blob/main/docs/unicodeTokens.md */
+    },
-        previewFormat() {
+    /* https://github.com/date-fns/date-fns/blob/main/docs/unicodeTokens.md */
-            const format = this.content.format === "custom" ? this.content.customFormat : this.content.format;
+    previewFormat() {
-            if (!format) return null;
+      const format =
-            return format.replace(/Y/g, "y").replace(/D/g, "d").replace(/A/g, "a");
+        this.content.format === "custom"
-        },
+          ? this.content.customFormat
-        formatedValue() {
+          : this.content.format;
-            return this.formatInputValue(this.variableValue);
+      if (!format) return null;
-        },
+      return format.replace(/Y/g, "y").replace(/D/g, "d").replace(/A/g, "a");
-        locale() {
+    },
-            if (this.content.lang === "pageLang") {
+    formatedValue() {
-                return wwLib.wwLang.lang;
+      return this.formatInputValue(this.variableValue);
-            }
+    },
+    locale() {
+      if (this.content.lang === "pageLang") {
+        return wwLib.wwLang.lang;
+      }
 
-            return this.content.lang;
+      return this.content.lang;
-        },
+    },
-        formatLocale() {
+    formatLocale() {
-            try {
+      try {
-                return DateFnsLocal[this.locale];
+        return DateFnsLocal[this.locale];
-            } catch (e) {
+      } catch (e) {
-                return "en";
+        return "en";
-            }
+      }
-        },
+    },
-        timezone() {
+    timezone() {
-            if (!this.content.timezone || this.content.timezone === "locale") return null;
+      if (!this.content.timezone || this.content.timezone === "locale")
-            return this.content.timezone;
+        return null;
-        },
+      return this.content.timezone;
-        dpKey() {
+    },
-            return (
+    dpKey() {
-                this.content.selectionMode +
+      return (
-                "-" +
+        this.content.selectionMode +
-                this.content.dateMode +
+        "-" +
-                "-" +
+        this.content.dateMode +
-                (this.content.menuPosition || "center") +
+        "-" +
-                (this.content.enableCalendarOnly ? "-only" : "") +
+        (this.content.menuPosition || "center") +
-                (this.content.enableRightSidebar ? "-rightside" : "") +
+        (this.content.enableCalendarOnly ? "-only" : "") +
-                (this.content.enableLeftSidebar ? "-leftside" : "")
+        (this.content.enableRightSidebar ? "-rightside" : "") +
-            );
+        (this.content.enableLeftSidebar ? "-leftside" : "")
-        },
+      );
-        modelType() {
+    },
-            if (this.content.dateMode === "date") return "yyyy-MM-dd";
+    modelType() {
-            if (this.content.dateMode === "time") return "HH:mm:SS";
+      if (this.content.dateMode === "date") return "yyyy-MM-dd";
-            if (this.content.dateMode === "month") return "yyyy-MM";
+      if (this.content.dateMode === "time") return "HH:mm:ss";
-            return null;
+      if (this.content.dateMode === "month") return "yyyy-MM";
-        },
+      return null;
-        isReadOnly() {
+    },
-            return this.wwElementState.props.readonly === undefined
+    isReadOnly() {
-                ? this.content.readonly
+      return this.wwElementState.props.readonly === undefined
-                : this.wwElementState.props.readonly;
+        ? this.content.readonly
-        },
+        : this.wwElementState.props.readonly;
-        customDayNames() {
+    },
-            if (this.locale == "ar") {
+    customDayNames() {
-                /*
+      if (this.locale == "ar") {
+        /*
                     Sun - أحد (Ahad)
                     Mon - إثن (Ithn)
                     Tue - ثلاث (Thulath)
@@ -223,110 +244,137 @@ export default {
                     Fri - جمعة (Jumu'ah)
                     Sat - سبت (Sabt)
                 */
-                const arDayList = ['أحد','إثن','ثلاث','أربع','خمس','جمعة','سبت'];
+        const arDayList = ["أحد", "إثن", "ثلاث", "أربع", "خمس", "جمعة", "سبت"];
-                const weekStartIndex = this.content.weekStart; // 0 to 6
+        const weekStartIndex = this.content.weekStart; // 0 to 6
-                return arDayList.slice(weekStartIndex).concat(arDayList.slice(0, weekStartIndex));
+        return arDayList
-            }
+          .slice(weekStartIndex)
-            return null;
+          .concat(arDayList.slice(0, weekStartIndex));
-        },
+      }
-        themeStyle() {
+      return null;
-            return {
-                // COLORS
-                "--dp-background-color": this.content.themeBackgroundColor,
-                "--dp-text-color": this.content.themeTextColor,
-                "--dp-hover-color": this.content.themeHoverColor,
-                "--dp-hover-text-color": this.content.themeHoverTextColor,
-                "--dp-hover-icon-color": this.content.themeHoverIconColor,
-                "--dp-primary-color": this.content.themePrimaryColor,
-                "--dp-primary-text-color": this.content.themePrimaryTextColor,
-                "--dp-secondary-color": this.content.themeSecondaryColor,
-                "--dp-border-color": this.content.themeBorderColor,
-                "--dp-menu-border-color": this.content.themeMenuBorderColor,
-                "--dp-border-color-hover": this.content.themeBorderHoverColor,
-                "--dp-disabled-color": this.content.themeDisabledColor,
-                "--dp-scroll-bar-background": this.content.themeScrollBarBackgroundColor,
-                "--dp-scroll-bar-color": this.content.themeMScrollBarColor,
-                "--dp-success-color": this.content.themeSuccessColor,
-                "--dp-success-color-disabled": this.content.themeSuccessDisabledColor,
-                "--dp-icon-color": this.content.themeIconColor,
-                "--dp-danger-color": this.content.themeDangerColor,
-                "--dp-highlight-color": this.content.themeHighlightColor,
-                // GENERAL
-                "--dp-font-family": this.content.themeFontFamily || "unset",
-                "--dp-border-radius": this.content.themeBorderRadius,
-                "--dp-cell-border-radius": this.content.themeCellBorderRadius,
-                "--dp-font-size": this.content.themeFontSize,
-                "--dp-preview-font-size": this.content.themePreviewFontSize,
-                "--dp-time-font-size": this.content.themeTimeFontSize,
-                "--dp-cell-size": this.content.themeCellSize,
-                "--dp-cell-padding": this.content.themeCellPadding,
-                "--dp-menu-min-width": this.content.themeMenuMinWidth,
-            };
-        },
     },
-    methods: {
+    themeStyle() {
-        handleSelection(value) {
+      return {
-            if (this.content.dateMode === "datetime" && value) {
+        // COLORS
-                value = Array.isArray(value)
+        "--dp-background-color": this.content.themeBackgroundColor,
-                    ? value.map((date) => (date ? date.toISOString() : null))
+        "--dp-text-color": this.content.themeTextColor,
-                    : value.toISOString();
+        "--dp-hover-color": this.content.themeHoverColor,
-            }
+        "--dp-hover-text-color": this.content.themeHoverTextColor,
-            const newValue = this.formatOutputValue(value);
+        "--dp-hover-icon-color": this.content.themeHoverIconColor,
-            if (JSON.stringify(this.variableValue) === JSON.stringify(newValue)) return;
+        "--dp-primary-color": this.content.themePrimaryColor,
-            this.setValue(newValue);
+        "--dp-primary-text-color": this.content.themePrimaryTextColor,
-            this.$emit("trigger-event", {
+        "--dp-secondary-color": this.content.themeSecondaryColor,
-                name: "change",
+        "--dp-border-color": this.content.themeBorderColor,
-                event: { value: newValue },
+        "--dp-menu-border-color": this.content.themeMenuBorderColor,
-            });
+        "--dp-border-color-hover": this.content.themeBorderHoverColor,
-        },
+        "--dp-disabled-color": this.content.themeDisabledColor,
-        formatInputValue(value) {
+        "--dp-scroll-bar-background":
-            if (!value) return null;
+          this.content.themeScrollBarBackgroundColor,
-            else if (this.content.selectionMode === "single") return value;
+        "--dp-scroll-bar-color": this.content.themeMScrollBarColor,
-            else if (this.content.selectionMode === "range") {
+        "--dp-success-color": this.content.themeSuccessColor,
-                if (!value.start && !value.end) return null;
+        "--dp-success-color-disabled": this.content.themeSuccessDisabledColor,
-                return [value.start || null, value.end || null].filter((value) => value !== null && value !== "");
+        "--dp-icon-color": this.content.themeIconColor,
-            }
+        "--dp-danger-color": this.content.themeDangerColor,
-            else if (this.content.selectionMode === "multi") return value;
+        "--dp-highlight-color": this.content.themeHighlightColor,
-        },
+        // GENERAL
-        formatOutputValue(value) {
+        "--dp-font-family": this.content.themeFontFamily || "unset",
-            if (!value) return null;
+        "--dp-border-radius": this.content.themeBorderRadius,
-            else if (this.content.selectionMode === "single") return value;
+        "--dp-cell-border-radius": this.content.themeCellBorderRadius,
-            else if (this.content.selectionMode === "range") return { start: value[0], end: value[1] };
+        "--dp-font-size": this.content.themeFontSize,
-            else if (this.content.selectionMode === "multi") return value;
+        "--dp-preview-font-size": this.content.themePreviewFontSize,
-        },
+        "--dp-time-font-size": this.content.themeTimeFontSize,
-        clearValue() {
+        "--dp-cell-size": this.content.themeCellSize,
-            const clearValue = this.content.selectionMode === "single"
+        "--dp-cell-padding": this.content.themeCellPadding,
-                ? null
+        "--dp-menu-min-width": this.content.themeMenuMinWidth,
-                : this.content.selectionMode === "range"
+      };
-                ? {
-                      start: null,
-                      end: null,
-                  }
-                : []
-            this.setValue(clearValue);
-        },
     },
+  },
+  methods: {
+    handleSelection(value) {
+      if (this.content.dateMode === "datetime" && value) {
+        value = Array.isArray(value)
+          ? value.map((date) => (date ? date.toISOString() : null))
+          : value.toISOString();
+      }
+      const newValue = this.formatOutputValue(value);
+      if (JSON.stringify(this.variableValue) === JSON.stringify(newValue))
+        return;
+      this.setValue(newValue);
+      this.$emit("trigger-event", {
+        name: "change",
+        event: { value: newValue },
+      });
+    },
+    formatInputValue(value) {
+      if (!value) return null;
+      else if (this.content.selectionMode === "single") return value;
+      else if (this.content.selectionMode === "range") {
+        if (!value.start && !value.end) return null;
+        return [value.start || null, value.end || null].filter(
+          (item) => item !== null && item !== ""
+        );
+      } else if (this.content.selectionMode === "multi") return value;
+    },
+    formatOutputValue(value) {
+      if (!value) return null;
+      else if (this.content.selectionMode === "single") return value;
+      else if (this.content.selectionMode === "range")
+        return { start: value[0], end: value[1] };
+      else if (this.content.selectionMode === "multi") return value;
+    },
+    clearValue() {
+      const clearValue =
+        this.content.selectionMode === "single"
+          ? null
+          : this.content.selectionMode === "range"
+          ? {
+              start: null,
+              end: null,
+            }
+          : [];
+      this.setValue(clearValue);
+    },
+    handleFlowStep(value) {
+      this.$emit("trigger-event", {
+        name: "onFlowStep",
+        event: { value: value },
+      });
+    },
+    openMenu() {
+      this.wwDatePicker.openMenu();
+    },
+    closeMenu() {
+      this.$nextTick(() => {
+        this.wwDatePicker.closeMenu();
+      });
+    },
+  },
 };
 </script>
 
 <style>
 .dp__action_row {
-    width: 100% !important;
+  width: 100% !important;
 }
 </style>
 
 <style lang="scss" scoped>
 :deep(.calendar-only.stretch) .dp__outer_menu_wrap {
-    width: 100% !important;
+  width: 100% !important;
 }
+
+:deep(.dp__action_buttons) {
+  display: flex;
+  justify-content: flex-end;
+}
+
 .calendar-only.center {
-    justify-content: center;
+  justify-content: center;
 }
 .required-handler {
-    opacity: 0;
+  opacity: 0;
-    width: 100%;
+  width: 100%;
-    height: 0;
+  height: 0;
-    position: absolute;
+  position: absolute;
-    pointer-events: none;
+  pointer-events: none;
 }
 </style>

src/components/elements/element-985570fc-b3c0-4566-8004-82ab3b30a11d/ww-config.js

@@ -112,20 +112,31 @@ export default {
       name: "change",
       label: { en: "On change" },
       event: { value: "2023-03-02T14:54:54.727Z" },
-      getTestEvent: "getTestEvent",
     },
     {
       name: "initValueChange",
       label: { en: "On init value change" },
       event: { value: "2023-03-02T14:54:54.727Z" },
-      getTestEvent: "getTestEvent",
+    },
+    {
+      name: "onFlowStep",
+      label: { en: "On flow step" },
+      event: { value: 1 },
     },
   ],
   actions: [
     {
-      label: 'Clear',
+      label: "Clear",
-      action: 'clearValue',
+      action: "clearValue",
-    }
+    },
+    {
+      label: "Open Menu",
+      action: "openMenu",
+    },
+    {
+      label: "Close Menu",
+      action: "closeMenu",
+    },
   ],
   properties: {
     initValueSingle: {
@@ -213,6 +224,7 @@ export default {
       type: "Title",
       section: "settings",
       editorOnly: true,
+      hidden: (content) => content.dateMode === "time",
     },
     timeTitle: {
       label: {
@@ -297,7 +309,8 @@ export default {
       classes: true,
       bindable: true,
       propertyHelp: {
-        tooltip: "If set to `true`, the date picker will be rendered at trigger button level and not above all elements. This may be useful in the case of a date picker in a pop-up.",
+        tooltip:
+          "If set to `true`, the date picker will be rendered at trigger button level and not above all elements. This may be useful in the case of a date picker in a pop-up.",
       },
     },
     calendarOnlyFit: {
@@ -591,6 +604,7 @@ export default {
       section: "settings",
       defaultValue: false,
       hidden: (content) => content.enableMultiCalendars,
+
     },
     flowHint: {
       label: {
@@ -614,7 +628,18 @@ export default {
       section: "settings",
       options: {
         item: {
-          type: "Text",
+          type: "TextSelect",
+          options: {
+            options: [
+              { value: "month", label: { en: "Month" } },
+              { value: "year", label: { en: "Year" } },
+              { value: "calendar", label: { en: "Calendar" } },
+              { value: "time", label: { en: "Time" } },
+              { value: "minutes", label: { en: "Minutes" } },
+              { value: "hours", label: { en: "Hours" } },
+              { value: "seconds", label: { en: "Seconds" } },
+            ],
+          },
         },
         movable: true,
         getItemLabel(_, index) {
@@ -711,6 +736,7 @@ export default {
       section: "settings",
       bindable: true,
       defaultValue: false,
+      hidden: (content) => content.dateMode === "time",
     },
     closeOnAutoApply: {
       label: {
@@ -720,6 +746,7 @@ export default {
       section: "settings",
       bindable: true,
       defaultValue: true,
+      hidden: (content) => !content.autoApply || content.dateMode === "time",
     },
     weekNumbers: {
       label: { en: "Week numbers" },

src/pinia/componentBases.js

@@ -23,7 +23,6 @@ import wwobjectb783dc65d5284f748c14e27c934c39b1 from '@/components/elements/elem
 import wwobject14723a2101784d92a7e9d1dfeaec29a7 from '@/components/elements/element-14723a21-0178-4d92-a7e9-d1dfeaec29a7/ww-config.js';
 import wwobject53401515b6944c79a88dabeecb1de562 from '@/components/elements/element-53401515-b694-4c79-a88d-abeecb1de562/ww-config.js';
 import wwobject9896d6950c964a0fb587c25e879ece77 from '@/components/elements/element-9896d695-0c96-4a0f-b587-c25e879ece77/ww-config.js';
-import wwobject985570fcb3c04566800482ab3b30a11d from '@/components/elements/element-985570fc-b3c0-4566-8004-82ab3b30a11d/ww-config.js';
 import wwobject547a655e37cd49ff9c4fc6b917a0b680 from '@/components/elements/element-547a655e-37cd-49ff-9c4f-c6b917a0b680/ww-config.js';
 import wwobject6d692ca26cdc4805aa0c211102f335d0 from '@/components/elements/element-6d692ca2-6cdc-4805-aa0c-211102f335d0/ww-config.js';
 import wwobject1b1e21739b7842cca8eea6167caea340 from '@/components/elements/element-1b1e2173-9b78-42cc-a8ee-a6167caea340/ww-config.js';
@@ -35,6 +34,7 @@ import wwobjecta823467cbdc74ceca38c71875c4c214a from '@/components/elements/elem
 import wwobject9ae1fce82e314bfda4d20450235bdfd5 from '@/components/elements/element-9ae1fce8-2e31-4bfd-a4d2-0450235bdfd5/ww-config.js';
 import wwobject9ecb2cfccef74be8b7363e17a3b7e9ff from '@/components/elements/element-9ecb2cfc-cef7-4be8-b736-3e17a3b7e9ff/ww-config.js';
 import wwobjectdeb10a015eef4aa190171b51c2ad6fd0 from '@/components/elements/element-deb10a01-5eef-4aa1-9017-1b51c2ad6fd0/ww-config.js';
+import wwobject985570fcb3c04566800482ab3b30a11d from '@/components/elements/element-985570fc-b3c0-4566-8004-82ab3b30a11d/ww-config.js';
 import wwobjectc6c0c00e49fd4cb9bd785bc09945721e from '@/components/elements/element-c6c0c00e-49fd-4cb9-bd78-5bc09945721e/ww-config.js';
 /* wwFront:end */
 
@@ -63,7 +63,6 @@ export const useComponentBasesStore = defineStore('componentBases', () => {
 'wwobject-14723a21-0178-4d92-a7e9-d1dfeaec29a7': getInheritedConfiguration({ ...wwobject14723a2101784d92a7e9d1dfeaec29a7, name: 'wwobject-14723a21-0178-4d92-a7e9-d1dfeaec29a7' }),
 'wwobject-53401515-b694-4c79-a88d-abeecb1de562': getInheritedConfiguration({ ...wwobject53401515b6944c79a88dabeecb1de562, name: 'wwobject-53401515-b694-4c79-a88d-abeecb1de562' }),
 'wwobject-9896d695-0c96-4a0f-b587-c25e879ece77': getInheritedConfiguration({ ...wwobject9896d6950c964a0fb587c25e879ece77, name: 'wwobject-9896d695-0c96-4a0f-b587-c25e879ece77' }),
-'wwobject-985570fc-b3c0-4566-8004-82ab3b30a11d': getInheritedConfiguration({ ...wwobject985570fcb3c04566800482ab3b30a11d, name: 'wwobject-985570fc-b3c0-4566-8004-82ab3b30a11d' }),
 'wwobject-547a655e-37cd-49ff-9c4f-c6b917a0b680': getInheritedConfiguration({ ...wwobject547a655e37cd49ff9c4fc6b917a0b680, name: 'wwobject-547a655e-37cd-49ff-9c4f-c6b917a0b680' }),
 'wwobject-6d692ca2-6cdc-4805-aa0c-211102f335d0': getInheritedConfiguration({ ...wwobject6d692ca26cdc4805aa0c211102f335d0, name: 'wwobject-6d692ca2-6cdc-4805-aa0c-211102f335d0' }),
 'wwobject-1b1e2173-9b78-42cc-a8ee-a6167caea340': getInheritedConfiguration({ ...wwobject1b1e21739b7842cca8eea6167caea340, name: 'wwobject-1b1e2173-9b78-42cc-a8ee-a6167caea340' }),
@@ -75,6 +74,7 @@ export const useComponentBasesStore = defineStore('componentBases', () => {
 'wwobject-9ae1fce8-2e31-4bfd-a4d2-0450235bdfd5': getInheritedConfiguration({ ...wwobject9ae1fce82e314bfda4d20450235bdfd5, name: 'wwobject-9ae1fce8-2e31-4bfd-a4d2-0450235bdfd5' }),
 'wwobject-9ecb2cfc-cef7-4be8-b736-3e17a3b7e9ff': getInheritedConfiguration({ ...wwobject9ecb2cfccef74be8b7363e17a3b7e9ff, name: 'wwobject-9ecb2cfc-cef7-4be8-b736-3e17a3b7e9ff' }),
 'wwobject-deb10a01-5eef-4aa1-9017-1b51c2ad6fd0': getInheritedConfiguration({ ...wwobjectdeb10a015eef4aa190171b51c2ad6fd0, name: 'wwobject-deb10a01-5eef-4aa1-9017-1b51c2ad6fd0' }),
+'wwobject-985570fc-b3c0-4566-8004-82ab3b30a11d': getInheritedConfiguration({ ...wwobject985570fcb3c04566800482ab3b30a11d, name: 'wwobject-985570fc-b3c0-4566-8004-82ab3b30a11d' }),
 'wwobject-c6c0c00e-49fd-4cb9-bd78-5bc09945721e': getInheritedConfiguration({ ...wwobjectc6c0c00e49fd4cb9bd785bc09945721e, name: 'wwobject-c6c0c00e-49fd-4cb9-bd78-5bc09945721e' })};
     /* wwFront:end */
  

template.html

@@ -12,20 +12,20 @@
 
         <link rel="icon" type="image/x-icon" href="favicon.ico?_wwcv={{cacheVersion}}" />
 
-        <link rel="manifest" href="manifest.json?_wwcv=175" />
+        <link rel="manifest" href="manifest.json?_wwcv=176" />
         <meta name="theme-color" content="" />
-        <link rel="apple-touch-icon" sizes="48x48" href="images/48-favicon.png?_wwcv=175">
+        <link rel="apple-touch-icon" sizes="48x48" href="images/48-favicon.png?_wwcv=176">
-<link rel="apple-touch-icon" sizes="72x72" href="images/72-favicon.png?_wwcv=175">
+<link rel="apple-touch-icon" sizes="72x72" href="images/72-favicon.png?_wwcv=176">
-<link rel="apple-touch-icon" sizes="96x96" href="images/96-favicon.png?_wwcv=175">
+<link rel="apple-touch-icon" sizes="96x96" href="images/96-favicon.png?_wwcv=176">
-<link rel="apple-touch-icon" sizes="128x128" href="images/128-favicon.png?_wwcv=175">
+<link rel="apple-touch-icon" sizes="128x128" href="images/128-favicon.png?_wwcv=176">
-<link rel="apple-touch-icon" sizes="144x144" href="images/144-favicon.png?_wwcv=175">
+<link rel="apple-touch-icon" sizes="144x144" href="images/144-favicon.png?_wwcv=176">
-<link rel="apple-touch-icon" sizes="152x152" href="images/152-favicon.png?_wwcv=175">
+<link rel="apple-touch-icon" sizes="152x152" href="images/152-favicon.png?_wwcv=176">
-<link rel="apple-touch-icon" sizes="192x192" href="images/192-favicon.png?_wwcv=175">
+<link rel="apple-touch-icon" sizes="192x192" href="images/192-favicon.png?_wwcv=176">
-<link rel="apple-touch-icon" sizes="256x256" href="images/256-favicon.png?_wwcv=175">
+<link rel="apple-touch-icon" sizes="256x256" href="images/256-favicon.png?_wwcv=176">
-<link rel="apple-touch-icon" sizes="384x384" href="images/384-favicon.png?_wwcv=175">
+<link rel="apple-touch-icon" sizes="384x384" href="images/384-favicon.png?_wwcv=176">
-<link rel="apple-touch-icon" sizes="512x512" href="images/512-favicon.png?_wwcv=175">
+<link rel="apple-touch-icon" sizes="512x512" href="images/512-favicon.png?_wwcv=176">
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
-<link href="/fonts/Phosphor/font.css?_wwcv=175" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<link href="/fonts/Phosphor/font.css?_wwcv=176" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
 <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
 <style>:root{ --ww-default-font-family: 'Raleway', sans-serif }</style>
         <style>