@sfxcode/formkit-primevue 3.2.4 → 3.2.5

package/dist/components/PrimeDatePicker.vue

@@ -1,81 +1,23 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { DatePickerBlurEvent, DatePickerProps } from 'primevue/datepicker'
-
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeDatePickerProps {
-  dateFormat?: DatePickerProps['dateFormat']
-  placeholder?: DatePickerProps['placeholder']
-  selectionMode?: DatePickerProps['selectionMode']
-  inline?: DatePickerProps['inline']
-  icon?: DatePickerProps['icon']
-  showOtherMonths?: DatePickerProps['showOtherMonths']
-  selectOtherMonths?: DatePickerProps['selectOtherMonths']
-  showIcon?: DatePickerProps['showIcon']
-  prevIcon?: DatePickerProps['prevIcon']
-  nextIcon?: DatePickerProps['nextIcon']
-  incrementIcon?: DatePickerProps['incrementIcon']
-  decrementIcon?: DatePickerProps['decrementIcon']
-  numberOfMonths?: DatePickerProps['numberOfMonths']
-  responsiveOptions?: DatePickerProps['responsiveOptions']
-  view?: DatePickerProps['view']
-  minDate?: DatePickerProps['minDate']
-  maxDate?: DatePickerProps['maxDate']
-  disabledDates?: DatePickerProps['disabledDates']
-  disabledDays?: DatePickerProps['disabledDays']
-  maxDateCount?: DatePickerProps['maxDateCount']
-  showOnFocus?: DatePickerProps['showOnFocus']
-  autoZIndex?: DatePickerProps['autoZIndex']
-  baseZIndex?: DatePickerProps['baseZIndex']
-  showButtonBar?: DatePickerProps['showButtonBar']
-  showTime?: DatePickerProps['showTime']
-  timeOnly?: DatePickerProps['timeOnly']
-  shortYearCutoff?: DatePickerProps['shortYearCutoff']
-  hourFormat?: DatePickerProps['hourFormat']
-  stepHour?: DatePickerProps['stepHour']
-  stepMinute?: DatePickerProps['stepMinute']
-  stepSecond?: DatePickerProps['stepSecond']
-  showSeconds?: DatePickerProps['showSeconds']
-  hideOnDateTimeSelect?: DatePickerProps['hideOnDateTimeSelect']
-  hideOnRangeSelection?: DatePickerProps['hideOnRangeSelection']
-  timeSeparator?: DatePickerProps['timeSeparator']
-  showWeek?: DatePickerProps['showWeek']
-  manualInput?: DatePickerProps['manualInput']
-  appendTo?: DatePickerProps['appendTo']
-  panelStyle?: DatePickerProps['panelStyle']
-  panelClass?: DatePickerProps['panelClass']
-  pt?: DatePickerProps['pt']
-  ptOptions?: DatePickerProps['ptOptions']
-  unstyled?: DatePickerProps['unstyled']
-  size?: DatePickerProps['size']
-  updateModelType?: DatePickerProps['updateModelType']
-}
-
+<script setup>
+import { useFormKitInput } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeDatePickerProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleInput } = useFormKitInput(props.context)
-
-function handleBlur(e: DatePickerBlurEvent) {
-  props.context?.handlers.blur(e.originalEvent as FocusEvent)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleInput } = useFormKitInput(props.context);
+function handleBlur(e) {
+  props.context?.handlers.blur(e.originalEvent);
 }
-
 function handleClearClick() {
-  props.context?.node.input(null)
+  props.context?.node.input(null);
 }
-
-function handleSelect(e: any) {
-  if (props.context?.selectionMode === 'range' || props.context?.selectionMode === 'multiple') {
-    props.context?.node.input(props.context._value)
-  }
-  else {
-    props.context?.node.input(e)
+function handleSelect(e) {
+  if (props.context?.selectionMode === "range" || props.context?.selectionMode === "multiple") {
+    props.context?.node.input(props.context._value);
+  } else {
+    props.context?.node.input(e);
   }
 }
 </script>

package/dist/components/PrimeInputMask.vue

@@ -1,34 +1,15 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { InputMaskProps } from 'primevue/inputmask'
-
-import type { PropType } from 'vue'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import { useFormKitInput, useFormKitSection } from '../composables'
-
-export interface FormKitPrimeInputMaskProps {
-  mask?: InputMaskProps['mask']
-  slotChar?: InputMaskProps['slotChar']
-  autoClear?: InputMaskProps['autoClear']
-  unmask?: InputMaskProps['unmask']
-  pt?: InputMaskProps['pt']
-  ptOptions?: InputMaskProps['ptOptions']
-  unstyled?: InputMaskProps['unstyled']
-  invalid?: InputMaskProps['invalid']
-  variant?: InputMaskProps['variant']
-  size?: InputMaskProps['size']
-}
-
+<script setup>
+import IconField from "primevue/iconfield";
+import InputIcon from "primevue/inputicon";
+import { useFormKitInput, useFormKitSection } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputMaskProps>,
-    required: true,
-  },
-})
-
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
-const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context);
+const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context);
 </script>
 
 <template>

package/dist/components/PrimeInputNumber.vue

@@ -1,70 +1,36 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { InputNumberBlurEvent, InputNumberProps } from 'primevue/inputnumber'
-
-import type { PropType } from 'vue'
-import { watch } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeInputNumberProps {
-  useGrouping?: InputNumberProps['useGrouping']
-  min?: InputNumberProps['min']
-  max?: InputNumberProps['max']
-  minFractionDigits?: InputNumberProps['minFractionDigits']
-  maxFractionDigits?: InputNumberProps['maxFractionDigits']
-  locale?: InputNumberProps['locale']
-  mode?: InputNumberProps['mode']
-  currency?: InputNumberProps['currency']
-  prefix?: InputNumberProps['prefix']
-  suffix?: InputNumberProps['suffix']
-  showButtons?: InputNumberProps['showButtons']
-  buttonLayout?: InputNumberProps['buttonLayout']
-  step?: InputNumberProps['step']
-  pt?: InputNumberProps['pt']
-  ptOptions?: InputNumberProps['ptOptions']
-  unstyled?: InputNumberProps['unstyled']
-  placeholder?: InputNumberProps['placeholder']
-  size?: InputNumberProps['size']
-}
-
+<script setup>
+import { watch } from "vue";
+import { useFormKitInput } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputNumberProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid } = useFormKitInput(props.context)
-
-function handleBlur(e: InputNumberBlurEvent) {
-  props.context?.handlers.blur(e.originalEvent as FocusEvent)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid } = useFormKitInput(props.context);
+function handleBlur(e) {
+  props.context?.handlers.blur(e.originalEvent);
 }
-
-function handleInput(_: any) {
-  if (typeof _.value === 'number' || _.value === null)
-    props.context?.node.input(_.value)
+function handleInput(_) {
+  if (typeof _.value === "number" || _.value === null)
+    props.context?.node.input(_.value);
 }
-
-function roundToDecimals(value: any, decimals: number) {
-  const factor = 10 ** decimals
-  return Math.round(value * factor) / factor
+function roundToDecimals(value, decimals) {
+  const factor = 10 ** decimals;
+  return Math.round(value * factor) / factor;
 }
-
 watch(
   () => props.context._value,
   (newValue) => {
-    // Only update if the value is different
-    if (newValue !== props.context.node.value && typeof newValue === 'number') {
+    if (newValue !== props.context.node.value && typeof newValue === "number") {
       if (props.context.maxFractionDigits && props.context.maxFractionDigits > 0) {
-        // fix floating-point precision issues
-        props.context?.node.input(roundToDecimals(newValue, props.context.maxFractionDigits))
-      }
-      else {
-        props.context?.node.input(newValue)
+        props.context?.node.input(roundToDecimals(newValue, props.context.maxFractionDigits));
+      } else {
+        props.context?.node.input(newValue);
       }
     }
-  },
-)
+  }
+);
 </script>
 
 <template>

package/dist/components/PrimeInputOtp.vue

@@ -1,29 +1,12 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { InputOtpProps } from 'primevue/inputotp'
-
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeInputOtpProps {
-  unstyled?: InputOtpProps['unstyled']
-  ptOptions?: InputOtpProps['ptOptions']
-  pt?: InputOtpProps['pt']
-  length?: InputOtpProps['length']
-  variant?: InputOtpProps['variant']
-  mask?: InputOtpProps['mask']
-  integerOnly?: InputOtpProps['integerOnly']
-  size?: InputOtpProps['size']
-}
-
+<script setup>
+import { useFormKitInput } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputOtpProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleBlur, handleInput } = useFormKitInput(props.context);
 </script>
 
 <template>

package/dist/components/PrimeInputText.vue

@@ -1,30 +1,15 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { InputTextProps } from 'primevue/inputtext'
-
-import type { PropType } from 'vue'
-import IconField from 'primevue/iconfield'
-import InputIcon from 'primevue/inputicon'
-import { useFormKitInput, useFormKitSection } from '../composables'
-
-export interface FormKitPrimeInputTextProps {
-  pt?: InputTextProps['pt']
-  ptOptions?: InputTextProps['ptOptions']
-  unstyled?: InputTextProps['unstyled']
-  size?: InputTextProps['size']
-  inputType?: string | undefined
-  placeholder?: string
-}
-
+<script setup>
+import IconField from "primevue/iconfield";
+import InputIcon from "primevue/inputicon";
+import { useFormKitInput, useFormKitSection } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeInputTextProps>,
-    required: true,
-  },
-})
-
-const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
-const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context);
+const { hasPrefixIcon, hasSuffixIcon } = useFormKitSection(props.context);
 </script>
 
 <template>

package/dist/components/PrimeKnob.vue

@@ -1,43 +1,18 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { KnobProps } from 'primevue/knob'
-
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeKnobProps {
-  pt?: KnobProps['pt']
-  ptOptions?: KnobProps['ptOptions']
-  unstyled?: KnobProps['unstyled']
-  min?: KnobProps['min']
-  max?: KnobProps['max']
-  step?: KnobProps['step']
-  size?: KnobProps['size']
-  strokeWidth?: KnobProps['strokeWidth']
-  showValue?: KnobProps['showValue']
-  valueColor?: KnobProps['valueColor']
-  rangeColor?: KnobProps['rangeColor']
-  textColor?: KnobProps['textColor']
-  valueTemplate?: KnobProps['valueTemplate']
-
-}
-
+<script setup>
+import { useFormKitInput } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeKnobProps>,
-    required: true,
-  },
-})
-
-const { unstyled, isInvalid } = useFormKitInput(props.context)
-
-function handleInput(e: any) {
-  props.context?.node.input(e)
-  props.context?.handlers.blur(e)
+    type: Object,
+    required: true
+  }
+});
+const { unstyled, isInvalid } = useFormKitInput(props.context);
+function handleInput(e) {
+  props.context?.node.input(e);
+  props.context?.handlers.blur(e);
 }
-
-function updateValue(n: number) {
-  props.context?.node.input(n)
+function updateValue(n) {
+  props.context?.node.input(n);
 }
 </script>
 

package/dist/components/PrimeListbox.vue

@@ -1,44 +1,12 @@
-<script setup lang="ts">
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { ListboxProps } from 'primevue/listbox'
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeListboxProps {
-  pt?: ListboxProps['pt']
-  ptOptions?: ListboxProps['ptOptions']
-  unstyled?: ListboxProps['unstyled']
-  options?: ListboxProps['options']
-  optionLabel?: ListboxProps['optionLabel']
-  optionValue?: ListboxProps['optionValue']
-  multiple?: ListboxProps['multiple']
-  filter?: ListboxProps['filter']
-  filterIcon?: ListboxProps['filterIcon']
-  filterPlaceholder?: ListboxProps['filterPlaceholder']
-  filterLocale?: ListboxProps['filterLocale']
-  filterMatchMode?: ListboxProps['filterMatchMode']
-  autoOptionFocus?: ListboxProps['autoOptionFocus']
-  selectOnFocus?: ListboxProps['selectOnFocus']
-  optionDisabled?: ListboxProps['optionDisabled']
-  optionGroupLabel?: ListboxProps['optionGroupLabel']
-  optionGroupChildren?: ListboxProps['optionGroupChildren']
-  listStyle?: ListboxProps['listStyle']
-  dataKey?: ListboxProps['dataKey']
-  metaKeySelection?: ListboxProps['metaKeySelection']
-  virtualScrollerOptions?: ListboxProps['virtualScrollerOptions']
-  tabindex?: ListboxProps['tabindex']
-  ariaLabel?: ListboxProps['ariaLabel']
-  ariaLabelledby?: ListboxProps['ariaLabelledby']
-}
-
+<script setup>
+import { useFormKitInput } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeListboxProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleInput, handleBlur } = useFormKitInput(props.context);
 </script>
 
 <template>

package/dist/components/PrimeMultiSelect.vue

@@ -1,57 +1,12 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { MultiSelectProps } from 'primevue/multiselect'
-
-import type { PropType } from 'vue'
-import { useFormKitInput } from '../composables'
-
-export interface FormKitPrimeMultiSelectProps {
-  options?: MultiSelectProps['options']
-  optionLabel?: MultiSelectProps['optionLabel']
-  optionValue?: MultiSelectProps['optionValue']
-  optionDisabled?: MultiSelectProps['optionDisabled']
-  optionGroupLabel?: MultiSelectProps['optionGroupLabel']
-  optionGroupChildren?: MultiSelectProps['optionGroupChildren']
-  scrollHeight?: MultiSelectProps['scrollHeight']
-  dataKey?: MultiSelectProps['dataKey']
-  filter?: MultiSelectProps['filter']
-  filterPlaceholder?: MultiSelectProps['filterPlaceholder']
-  filterLocale?: MultiSelectProps['filterLocale']
-  filterMatchMode?: MultiSelectProps['filterMatchMode']
-  filterFields?: MultiSelectProps['filterFields']
-  appendTo?: MultiSelectProps['appendTo']
-  display?: MultiSelectProps['display']
-  maxSelectedLabels?: MultiSelectProps['maxSelectedLabels']
-  selectedItemsLabel?: MultiSelectProps['selectedItemsLabel']
-  selectionLimit?: MultiSelectProps['selectionLimit']
-  showToggleAll?: MultiSelectProps['showToggleAll']
-  loading?: MultiSelectProps['loading']
-  selectAll?: MultiSelectProps['selectAll']
-  resetFilterOnHide?: MultiSelectProps['resetFilterOnHide']
-  virtualScrollerOptions?: MultiSelectProps['virtualScrollerOptions']
-  autoOptionFocus?: MultiSelectProps['autoOptionFocus']
-  autoFilterFocus?: MultiSelectProps['autoFilterFocus']
-  filterMessage?: MultiSelectProps['filterMessage']
-  selectionMessage?: MultiSelectProps['selectionMessage']
-  emptySelectionMessage?: MultiSelectProps['emptySelectionMessage']
-  emptyFilterMessage?: MultiSelectProps['emptyFilterMessage']
-  emptyMessage?: MultiSelectProps['emptyMessage']
-  pt?: MultiSelectProps['pt']
-  placeholder?: MultiSelectProps['placeholder']
-  ptOptions?: MultiSelectProps['ptOptions']
-  unstyled?: MultiSelectProps['unstyled']
-  size?: MultiSelectProps['size']
-
-}
-
+<script setup>
+import { useFormKitInput } from "../composables";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext & FormKitPrimeMultiSelectProps>,
-    required: true,
-  },
-})
-
-const { validSlotNames, unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.context)
+    type: Object,
+    required: true
+  }
+});
+const { validSlotNames, unstyled, isInvalid, handleBlur, handleChange } = useFormKitInput(props.context);
 </script>
 
 <template>

package/dist/components/PrimeOutputBoolean.vue

@@ -1,31 +1,24 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { PropType } from 'vue'
-import type { FormKitIconProps } from './FormKitIcon.vue'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useFormKitSection } from '../composables'
-import FormKitIcon from './FormKitIcon.vue'
-import FormKitPrefix from './FormKitPrefix.vue'
-import FormKitSuffix from './FormKitSuffix.vue'
-
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useFormKitSection } from "../composables";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
-    required: true,
-  },
-})
-
-const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
-
-const { t } = useI18n()
-
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const { t } = useI18n();
 const translated = computed(() => {
   if (props.context?._value)
-    return props.context?.trueValue ?? t('formkit.prime.true', 'true')
+    return props.context?.trueValue ?? t("formkit.prime.true", "true");
   else
-    return props.context?.falseValue ?? t('formkit.prime.false', 'false')
-})
+    return props.context?.falseValue ?? t("formkit.prime.false", "false");
+});
 </script>
 
 <template>

package/dist/components/PrimeOutputDate.vue

@@ -1,41 +1,31 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { PropType } from 'vue'
-import type { FormKitIconProps } from './FormKitIcon.vue'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useFormKitSection } from '../composables'
-import FormKitIcon from './FormKitIcon.vue'
-import FormKitPrefix from './FormKitPrefix.vue'
-import FormKitSuffix from './FormKitSuffix.vue'
-
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { useFormKitSection } from "../composables";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
-    required: true,
-  },
-})
-
-const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
-
-const { d } = useI18n()
-
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const { d } = useI18n();
 const converted = computed(() => {
   if (props?.context?._value) {
-    let result = ''
-    const format = props?.context?.attrs?.value?.format ? props?.context?.attrs.value.format : 'short'
+    let result = "";
+    const format = props?.context?.attrs?.value?.format ? props?.context?.attrs.value.format : "short";
     try {
-      result = d(props?.context?._value, format)
-    }
-    // eslint-disable-next-line unused-imports/no-unused-vars
-    catch (e) {
+      result = d(props?.context?._value, format);
+    } catch (e) {
     }
-    return result
-  }
-  else {
-    return ''
+    return result;
+  } else {
+    return "";
   }
-})
+});
 </script>
 
 <template>

package/dist/components/PrimeOutputDuration.vue

@@ -1,22 +1,16 @@
-<script setup lang='ts'>
-import type { FormKitFrameworkContext } from '@formkit/core'
-import type { PropType } from 'vue'
-import type { FormKitIconProps } from './FormKitIcon.vue'
-import { useFormKitSection, useOutputDuration } from '../composables'
-import FormKitIcon from './FormKitIcon.vue'
-import FormKitPrefix from './FormKitPrefix.vue'
-import FormKitSuffix from './FormKitSuffix.vue'
-
+<script setup>
+import { useFormKitSection, useOutputDuration } from "../composables";
+import FormKitIcon from "./FormKitIcon.vue";
+import FormKitPrefix from "./FormKitPrefix.vue";
+import FormKitSuffix from "./FormKitSuffix.vue";
 const props = defineProps({
   context: {
-    type: Object as PropType<FormKitFrameworkContext> & FormKitIconProps,
-    required: true,
-  },
-})
-
-const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context)
-
-const { formattedDuration } = useOutputDuration()
+    type: Object,
+    required: true
+  }
+});
+const { hasPrefix, hasPrefixIcon, hasSuffix, hasSuffixIcon } = useFormKitSection(props.context);
+const { formattedDuration } = useOutputDuration();
 </script>
 
 <template>