npm - @nextcloud/vue - Versions diffs - 8.27.0 → 8.28.0 - Mend

@nextcloud/vue 8.27.0 → 8.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (352) hide show

package/dist/chunks/NcCheckboxRadioSwitch-DbK49DI7.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcCheckboxRadioSwitch-DbK49DI7.cjs","sources":["../../node_modules/vue-material-design-icons/CheckboxBlankOutline.vue","../../node_modules/vue-material-design-icons/MinusBox.vue","../../node_modules/vue-material-design-icons/CheckboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxBlank.vue","../../node_modules/vue-material-design-icons/ToggleSwitchOff.vue","../../node_modules/vue-material-design-icons/ToggleSwitch.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon checkbox-blank-outline-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CheckboxBlankOutlineIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon minus-box-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"MinusBoxIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon checkbox-marked-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CheckboxMarkedIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon radiobox-marked-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"RadioboxMarkedIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon radiobox-blank-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"RadioboxBlankIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon toggle-switch-off-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"ToggleSwitchOffIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon toggle-switch-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"ToggleSwitchIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","\n\n<template>\n\t<span class=\"checkbox-content\"\n\t\t:class=\"{\n\t\t\t['checkbox-content-' + type]: true,\n\t\t\t'checkbox-content--button-variant': buttonVariant,\n\t\t\t'checkbox-content--has-text': !!$slots.default,\n\t\t}\">\n\t\t\n\t\t<span :class=\"{\n\t\t\t\t'checkbox-content__icon': true,\n\t\t\t\t'checkbox-content__icon--checked': isChecked,\n\t\t\t\t[iconClass]: true\n\t\t\t}\"\n\t\t\t:aria-hidden=\"true\"\n\t\t\tinert>\n\t\t\t\n\t\t\t<slot name=\"icon\"\n\t\t\t\t:checked=\"isChecked\"\n\t\t\t\t:loading=\"loading\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<component :is=\"checkboxRadioIconElement\"\n\t\t\t\t\tv-else-if=\"!buttonVariant\"\n\t\t\t\t\t:size=\"size\" />\n\t\t\t</slot>\n\t\t</span>\n\n\t\t<span v-if=\"$slots.default\" :class=\"['checkbox-content__text', textClass]\">\n\t\t\t\n\t\t\t<slot />\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'\nimport MinusBox from 'vue-material-design-icons/MinusBox.vue'\nimport CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'\nimport RadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'\nimport RadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'\nimport ToggleSwitchOff from 'vue-material-design-icons/ToggleSwitchOff.vue'\nimport ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'\n\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nexport const TYPE_CHECKBOX = 'checkbox'\nexport const TYPE_RADIO = 'radio'\nexport const TYPE_SWITCH = 'switch'\nexport const TYPE_BUTTON = 'button'\n\nexport default {\n\tname: 'NcCheckboxContent',\n\n\tcomponents: {\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Class for the icon element\n\t\t */\n\t\ticonClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Class for the text element\n\t\t */\n\t\ttextClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Type of the input. checkbox, radio, switch, or button.\n\t\t *\n\t\t * Only use button when used in a `tablist` container and the\n\t\t * `tab` role is set.\n\t\t *\n\t\t * @type {'checkbox'|'radio'|'switch'|'button'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'checkbox',\n\t\t\tvalidator: type => [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_SWITCH,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t].includes(type),\n\t\t},\n\n\t\t/**\n\t\t * Toggle the alternative button style\n\t\t */\n\t\tbuttonVariant: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * True if the entry is checked\n\t\t */\n\t\tisChecked: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Indeterminate state\n\t\t */\n\t\tindeterminate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Icon size\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 24,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tisButtonType() {\n\t\t\treturn this.type === TYPE_BUTTON\n\t\t},\n\n\t\t/**\n\t\t * Returns the proper Material icon depending on the select case\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcheckboxRadioIconElement() {\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn RadioboxMarked\n\t\t\t\t}\n\t\t\t\treturn RadioboxBlank\n\t\t\t}\n\n\t\t\t// Switch\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn ToggleSwitch\n\t\t\t\t}\n\t\t\t\treturn ToggleSwitchOff\n\t\t\t}\n\n\t\t\t// Checkbox\n\t\t\tif (this.indeterminate) {\n\t\t\t\treturn MinusBox\n\t\t\t}\n\t\t\tif (this.isChecked) {\n\t\t\t\treturn CheckboxMarked\n\t\t\t}\n\t\t\treturn CheckboxBlankOutline\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.checkbox-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\tuser-select: none;\n\tmin-height: var(--default-clickable-area);\n\tborder-radius: var(--checkbox-radio-switch--border-radius);\n\tpadding: var(--default-grid-baseline) calc((var(--default-clickable-area) - var(--icon-height)) / 2);\n\t// Set to 100% to make text overflow work on button style\n\twidth: 100%;\n\t// but restrict to content so plain checkboxes / radio switches do not expand\n\tmax-width: fit-content;\n\n\t&__text {\n\t\tflex: 1 0;\n\n\t\t&:empty {\n\t\t\t// hide text if empty to ensure checkbox outline is a circle instead of oval\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&__icon > * {\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t\tcolor: var(--color-primary-element);\n\t}\n\n\t&--button-variant {\n\t\t.checkbox-content__icon:not(.checkbox-content__icon--checked) > * {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t.checkbox-content__icon--checked > * {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t}\n\t}\n\n\t&--has-text {\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&, * {\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n","\n\n<docs>\n\n### General description\n\nThis is a simple input checkbox, radio and switch design.\nPlease have a look at proper usage and recommendations: https://material.io/components/checkboxes\n\nNote: All attributes on the element are passed to the inner input element - except for the button type.\n\n### Standard checkbox\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\">Enable sharing (v-model)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :model-value=\"sharingEnabled\" :loading=\"loading\" @update:modelValue=\"onToggle\">Enable sharing (with request loading)</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tloading: false,\n\t\t\tsharingEnabled: false,\n\t\t}\n\t},\n\tmethods: {\n\t\tonToggle() {\n\t\t\tthis.loading = true\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.sharingEnabled = !this.sharingEnabled\n\t\t\t\tthis.loading = false\n\t\t\t}, 1000)\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard radio set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"rw\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"rwx\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write+execute</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsharingPermission: 'r',\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Standard radio set with alternative button style\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: 'r',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Radio set with button style and icons\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tSettings enabled: {{ enableSettings === 'y' ? 'yes' : 'no' }}\n\t</div>\n</template>\n<script>\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport CancelIcon from 'vue-material-design-icons/Cancel.vue'\nexport default {\n\tcomponents: {\n\t\tCheckIcon,\n\t\tCancelIcon,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tenableSettings: 'n',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard checkbox set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :disabled=\"true\" v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission\">Permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"w\" name=\"sharing_permission\">Permission write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"d\" name=\"sharing_permission\">Permission delete</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"x\" name=\"sharing_permission\">Permission execute</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: ['r', 'd'],\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard switch\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\">Enable sharing (v-model)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingEnabled: true,\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"computedWrapperElement\"\n\t\t:id=\"wrapperId\"\n\t\t:aria-label=\"isButtonType && ariaLabel ? ariaLabel : undefined\"\n\t\t:class=\"{\n\t\t\t['checkbox-radio-switch-' + type]: type,\n\t\t\t'checkbox-radio-switch--checked': isChecked,\n\t\t\t'checkbox-radio-switch--disabled': disabled,\n\t\t\t'checkbox-radio-switch--indeterminate': hasIndeterminate ? indeterminate : false,\n\t\t\t'checkbox-radio-switch--button-variant': buttonVariant,\n\t\t\t'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',\n\t\t\t'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',\n\t\t\t'button-vue': isButtonType,\n\t\t}\"\n\t\tclass=\"checkbox-radio-switch\"\n\t\t:style=\"cssVars\"\n\t\t:type=\"isButtonType ? 'button' : null\"\n\t\tv-bind=\"isButtonType ? $attrs : dataAttrs\"\n\t\tv-on=\"isButtonType ? listeners : null\">\n\t\t<input v-if=\"!isButtonType\"\n\t\t\t:id=\"id\"\n\t\t\t:aria-labelledby=\"!isButtonType && !ariaLabel ? `${id}-label` : null\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\tclass=\"checkbox-radio-switch__input\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:type=\"inputType\"\n\t\t\t:value=\"value\"\n\t\t\t:checked=\"isChecked\"\n\t\t\t:indeterminate.prop=\"hasIndeterminate ? indeterminate : null\"\n\t\t\t:required=\"required\"\n\t\t\t:name=\"name\"\n\t\t\tv-bind=\"nonDataAttrs\"\n\t\t\tv-on=\"listeners\">\n\t\t<NcCheckboxContent :id=\"!isButtonType ? `${id}-label` : undefined\"\n\t\t\tclass=\"checkbox-radio-switch__content\"\n\t\t\ticon-class=\"checkbox-radio-switch__icon\"\n\t\t\ttext-class=\"checkbox-radio-switch__text\"\n\t\t\t:type=\"type\"\n\t\t\t:indeterminate=\"hasIndeterminate ? indeterminate : false\"\n\t\t\t:button-variant=\"buttonVariant\"\n\t\t\t:is-checked=\"isChecked\"\n\t\t\t:loading=\"loading\"\n\t\t\t:size=\"size\"\n\t\t\t@click.native=\"onToggle\">\n\t\t\t<template #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\n\t\t\t\n\t\t\t<slot />\n\t\t</NcCheckboxContent>\n\t</component>\n</template>\n\n<script>\nimport { n, t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\nexport default {\n\tname: 'NcCheckboxRadioSwitch',\n\n\tcomponents: {\n\t\tNcCheckboxContent,\n\t},\n\n\t// We need to pass attributes to the input element\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Unique id attribute of the input\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'checkbox-radio-switch-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Unique id attribute of the wrapper element\n\t\t */\n\t\twrapperId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Input name. Required for radio, optional for checkbox, and ignored\n\t\t * for button.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Required if no text is set.\n\t\t * The aria-label is forwarded to the input or button.\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Type of the input. checkbox, radio, switch, or button.\n\t\t *\n\t\t * Only use button when used in a `tablist` container and the\n\t\t * `tab` role is set.\n\t\t *\n\t\t * @type {'checkbox'|'radio'|'switch'|'button'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'checkbox',\n\t\t\tvalidator: type => [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_SWITCH,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t].includes(type),\n\t\t},\n\n\t\t/**\n\t\t * Toggle the alternative button style\n\t\t */\n\t\tbuttonVariant: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Are the elements are all direct siblings?\n\t\t * If so they will be grouped horizontally or vertically\n\t\t *\n\t\t * @type {'no'|'horizontal'|'vertical'}\n\t\t */\n\t\tbuttonVariantGrouped: {\n\t\t\ttype: String,\n\t\t\tdefault: 'no',\n\t\t\tvalidator: v => ['no', 'vertical', 'horizontal'].includes(v),\n\t\t},\n\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tchecked: {\n\t\t\ttype: [Boolean, Array, String],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Checkbox value\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, Array, String],\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Value to be synced on check\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Disabled state\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Indeterminate state\n\t\t */\n\t\tindeterminate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Required state\n\t\t */\n\t\trequired: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Wrapping element tag\n\t\t *\n\t\t * When `type` is set to `button` this will be ignored\n\t\t *\n\t\t * Defaults to `span`\n\t\t */\n\t\twrapperElement: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:checked',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('checked', 'update:checked')\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdataAttrs() {\n\t\t\t// filter all data attributes\n\t\t\treturn Object.fromEntries(Object.entries(this.$attrs)\n\t\t\t\t.filter(([key]) => key.startsWith('data-')))\n\t\t},\n\n\t\tnonDataAttrs() {\n\t\t\t// filter all non-data attributes\n\t\t\treturn Object.fromEntries(Object.entries(this.$attrs)\n\t\t\t\t.filter(([key]) => !key.startsWith('data-')))\n\t\t},\n\n\t\tisButtonType() {\n\t\t\treturn this.type === TYPE_BUTTON\n\t\t},\n\n\t\tcomputedWrapperElement() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn 'button'\n\t\t\t}\n\t\t\tif (this.wrapperElement !== null) {\n\t\t\t\treturn this.wrapperElement\n\t\t\t}\n\t\t\treturn 'span'\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn {\n\t\t\t\t\tclick: this.onToggle,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tchange: this.onToggle,\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Icon size\n\t\t *\n\t\t * @return {number}\n\t\t */\n\t\tsize() {\n\t\t\treturn this.type === TYPE_SWITCH\n\t\t\t\t? 36\n\t\t\t\t: 24\n\t\t},\n\n\t\t/**\n\t\t * Css local variables for this component\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcssVars() {\n\t\t\treturn {\n\t\t\t\t'--icon-size': this.size + 'px',\n\t\t\t\t'--icon-height': (this.type === TYPE_SWITCH ? 16 : this.size) + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Return the input type.\n\t\t * Switch is not an official type\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tinputType() {\n\t\t\tconst nativeTypes = [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t]\n\t\t\tif (nativeTypes.includes(this.type)) {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn TYPE_CHECKBOX\n\t\t},\n\n\t\t/**\n\t\t * Check if that entry is checked\n\t\t * If value is defined, we use that as the checked value\n\t\t * If not, we expect true/false in checked state\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.value !== null) {\n\t\t\t\tif (Array.isArray(this.model)) {\n\t\t\t\t\treturn [...this.model].indexOf(this.value) > -1\n\t\t\t\t}\n\t\t\t\treturn this.model === this.value\n\t\t\t}\n\t\t\treturn this.model === true\n\t\t},\n\n\t\thasIndeterminate() {\n\t\t\treturn [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t].includes(this.inputType)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (this.name && this.type === TYPE_CHECKBOX) {\n\t\t\tif (!Array.isArray(this.model)) {\n\t\t\t\tthrow new Error('When using groups of checkboxes, the updated value will be an array.')\n\t\t\t}\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (this.name && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches are not made to be used for data sets. Please use checkboxes instead.')\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (typeof this.model !== 'boolean' && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches can only be used with boolean as checked prop.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tn,\n\n\t\tonToggle(event) {\n\t\t\tif (this.disabled || event.target.tagName.toLowerCase() === 'a') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tthis.model = this.value\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tthis.model = !this.isChecked\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If the initial value was a boolean, let's keep it that way\n\t\t\tif (typeof this.model === 'boolean') {\n\t\t\t\tthis.model = !this.model\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Dispatch the checked values as an array if multiple, or single value otherwise\n\t\t\tconst values = this.getInputsSet()\n\t\t\t\t.filter(input => input.checked)\n\t\t\t\t.map(input => input.value)\n\n\t\t\tif (values.includes(this.value)) {\n\t\t\t\tthis.model = values.filter((v) => v !== this.value)\n\t\t\t} else {\n\t\t\t\tthis.model = [...values, this.value]\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Get the input set based on this name\n\t\t *\n\t\t * @return {Node[]}\n\t\t */\n\t\tgetInputsSet() {\n\t\t\treturn [...document.getElementsByName(this.name)]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.checkbox-radio-switch {\n\tdisplay: flex;\n\talign-items: center;\n\tcolor: var(--color-main-text);\n\tbackground-color: transparent;\n\tfont-size: var(--default-font-size);\n\tline-height: var(--default-line-height);\n\tpadding: 0;\n\tposition: relative;\n\n\t&__input {\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\topacity: 0 !important; // We need !important, or it gets overwritten by server style\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t\t// Same as label padding\n\t\tmargin: 4px $icon-margin;\n\t}\n\n\t&__input:focus-visible + &__content,\n\t&__input:focus-visible {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tborder-color: var(--color-main-background);\n\t\toutline-offset: -2px;\n\t}\n\n\t&--disabled &__content {\n\t\topacity: $opacity_disabled;\n\t\t:deep(.checkbox-radio-switch__icon) > * {\n\t\t\tcolor: var(--color-main-text)\n\t\t}\n\t\t&.checkbox-content,\n\t\t&.checkbox-content :deep(*:not(a)) {\n\t\t\tcursor: default !important;\n\t\t}\n\t}\n\n\t&:not(&--disabled, &--checked):focus-within &__content,\n\t&:not(&--disabled, &--checked) &__content:hover {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&--checked:not(&--disabled):focus-within &__content,\n\t&--checked:not(&--disabled) &__content:hover {\n\t\tbackground-color: var(--color-primary-element-hover);\n\t}\n\n\t&--checked:not(&--button-variant):not(&--disabled):focus-within &__content,\n\t&--checked:not(&--button-variant):not(&--disabled) &__content:hover {\n\t\tbackground-color: var(--color-primary-element-light-hover);\n\t}\n\n\t// Switch specific rules\n\t&-switch:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t// If switch is checked AND disabled, use the fade primary colour\n\t&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-primary-element-light);\n\t}\n\n\t--checkbox-radio-switch--border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t// keep inner border width in mind\n\t--checkbox-radio-switch--border-radius-outer: calc(var(--checkbox-radio-switch--border-radius) + 2px);\n\n\t&--button-variant.checkbox-radio-switch {\n\t\tbackground-color: var(--color-main-background);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\toverflow: hidden;\n\n\t\t&--checked {\n\t\t\tfont-weight: bold;\n\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t}\n\t\t}\n\t}\n\n\t// Text overflow of button style\n\t&--button-variant :deep(.checkbox-radio-switch__text) {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\twidth: 100%;\n\t}\n\n\t// Set icon color for non active elements to main text color\n\t&--button-variant:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t// Hide icon container if empty to remove virtual padding\n\t&--button-variant :deep(.checkbox-radio-switch__icon:empty) {\n\t\tdisplay: none;\n\t}\n\n\t&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped),\n\t&--button-variant &__content {\n\t\tborder-radius: var(--checkbox-radio-switch--border-radius);\n\t}\n\n\t/* Special rules for vertical button groups */\n\t&--button-variant-v-grouped &__content {\n\t\tflex-basis: 100%;\n\t\t// vertically grouped buttons should all have the same width\n\t\tmax-width: unset;\n\t}\n\t&--button-variant-v-grouped {\n\t\t&:first-of-type {\n\t\t\tborder-start-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-start-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-end-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\n\t\t// remove borders between elements\n\t\t&:not(:last-of-type) {\n\t\t\tborder-bottom: 0!important;\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tmargin-bottom: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-top: 0!important;\n\t\t}\n\t}\n\n\t/* Special rules for horizontal button groups */\n\t&--button-variant-h-grouped {\n\t\t&:first-of-type {\n\t\t\tborder-start-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-start-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\n\t\t// remove borders between elements\n\t\t&:not(:last-of-type) {\n\t\t\tborder-inline-end: 0!important;\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tmargin-inline-end: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-inline-start: 0!important;\n\t\t}\n\t}\n\t&--button-variant-h-grouped :deep(.checkbox-radio-switch__text) {\n\t\ttext-align: center;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\t&--button-variant-h-grouped &__content {\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\tmargin: 0;\n\t\tgap: 0;\n\t}\n}\n</style>\n"],"names":["_sfc_main","NcLoadingIcon","GenRandomId","useModelMigration","t","n"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6]}

package/dist/chunks/NcCheckboxRadioSwitch-VeztTzpz.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcCheckboxRadioSwitch-VeztTzpz.mjs","sources":["../../node_modules/vue-material-design-icons/CheckboxBlankOutline.vue","../../node_modules/vue-material-design-icons/MinusBox.vue","../../node_modules/vue-material-design-icons/CheckboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxMarked.vue","../../node_modules/vue-material-design-icons/RadioboxBlank.vue","../../node_modules/vue-material-design-icons/ToggleSwitchOff.vue","../../node_modules/vue-material-design-icons/ToggleSwitch.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue","../../src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon checkbox-blank-outline-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CheckboxBlankOutlineIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon minus-box-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"MinusBoxIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon checkbox-marked-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"CheckboxMarkedIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon radiobox-marked-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"RadioboxMarkedIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon radiobox-blank-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"RadioboxBlankIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon toggle-switch-off-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"ToggleSwitchOffIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon toggle-switch-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"ToggleSwitchIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","\n\n<template>\n\t<span class=\"checkbox-content\"\n\t\t:class=\"{\n\t\t\t['checkbox-content-' + type]: true,\n\t\t\t'checkbox-content--button-variant': buttonVariant,\n\t\t\t'checkbox-content--has-text': !!$slots.default,\n\t\t}\">\n\t\t\n\t\t<span :class=\"{\n\t\t\t\t'checkbox-content__icon': true,\n\t\t\t\t'checkbox-content__icon--checked': isChecked,\n\t\t\t\t[iconClass]: true\n\t\t\t}\"\n\t\t\t:aria-hidden=\"true\"\n\t\t\tinert>\n\t\t\t\n\t\t\t<slot name=\"icon\"\n\t\t\t\t:checked=\"isChecked\"\n\t\t\t\t:loading=\"loading\">\n\t\t\t\t<NcLoadingIcon v-if=\"loading\" />\n\t\t\t\t<component :is=\"checkboxRadioIconElement\"\n\t\t\t\t\tv-else-if=\"!buttonVariant\"\n\t\t\t\t\t:size=\"size\" />\n\t\t\t</slot>\n\t\t</span>\n\n\t\t<span v-if=\"$slots.default\" :class=\"['checkbox-content__text', textClass]\">\n\t\t\t\n\t\t\t<slot />\n\t\t</span>\n\t</span>\n</template>\n\n<script>\nimport CheckboxBlankOutline from 'vue-material-design-icons/CheckboxBlankOutline.vue'\nimport MinusBox from 'vue-material-design-icons/MinusBox.vue'\nimport CheckboxMarked from 'vue-material-design-icons/CheckboxMarked.vue'\nimport RadioboxMarked from 'vue-material-design-icons/RadioboxMarked.vue'\nimport RadioboxBlank from 'vue-material-design-icons/RadioboxBlank.vue'\nimport ToggleSwitchOff from 'vue-material-design-icons/ToggleSwitchOff.vue'\nimport ToggleSwitch from 'vue-material-design-icons/ToggleSwitch.vue'\n\nimport NcLoadingIcon from '../NcLoadingIcon/index.js'\n\nexport const TYPE_CHECKBOX = 'checkbox'\nexport const TYPE_RADIO = 'radio'\nexport const TYPE_SWITCH = 'switch'\nexport const TYPE_BUTTON = 'button'\n\nexport default {\n\tname: 'NcCheckboxContent',\n\n\tcomponents: {\n\t\tNcLoadingIcon,\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Class for the icon element\n\t\t */\n\t\ticonClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Class for the text element\n\t\t */\n\t\ttextClass: {\n\t\t\ttype: [String, Object],\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Type of the input. checkbox, radio, switch, or button.\n\t\t *\n\t\t * Only use button when used in a `tablist` container and the\n\t\t * `tab` role is set.\n\t\t *\n\t\t * @type {'checkbox'|'radio'|'switch'|'button'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'checkbox',\n\t\t\tvalidator: type => [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_SWITCH,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t].includes(type),\n\t\t},\n\n\t\t/**\n\t\t * Toggle the alternative button style\n\t\t */\n\t\tbuttonVariant: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * True if the entry is checked\n\t\t */\n\t\tisChecked: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Indeterminate state\n\t\t */\n\t\tindeterminate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Icon size\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: 24,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\tisButtonType() {\n\t\t\treturn this.type === TYPE_BUTTON\n\t\t},\n\n\t\t/**\n\t\t * Returns the proper Material icon depending on the select case\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcheckboxRadioIconElement() {\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn RadioboxMarked\n\t\t\t\t}\n\t\t\t\treturn RadioboxBlank\n\t\t\t}\n\n\t\t\t// Switch\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tif (this.isChecked) {\n\t\t\t\t\treturn ToggleSwitch\n\t\t\t\t}\n\t\t\t\treturn ToggleSwitchOff\n\t\t\t}\n\n\t\t\t// Checkbox\n\t\t\tif (this.indeterminate) {\n\t\t\t\treturn MinusBox\n\t\t\t}\n\t\t\tif (this.isChecked) {\n\t\t\t\treturn CheckboxMarked\n\t\t\t}\n\t\t\treturn CheckboxBlankOutline\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.checkbox-content {\n\tdisplay: flex;\n\talign-items: center;\n\tflex-direction: row;\n\tgap: var(--default-grid-baseline);\n\tuser-select: none;\n\tmin-height: var(--default-clickable-area);\n\tborder-radius: var(--checkbox-radio-switch--border-radius);\n\tpadding: var(--default-grid-baseline) calc((var(--default-clickable-area) - var(--icon-height)) / 2);\n\t// Set to 100% to make text overflow work on button style\n\twidth: 100%;\n\t// but restrict to content so plain checkboxes / radio switches do not expand\n\tmax-width: fit-content;\n\n\t&__text {\n\t\tflex: 1 0;\n\n\t\t&:empty {\n\t\t\t// hide text if empty to ensure checkbox outline is a circle instead of oval\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t&__icon > * {\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t\tcolor: var(--color-primary-element);\n\t}\n\n\t&--button-variant {\n\t\t.checkbox-content__icon:not(.checkbox-content__icon--checked) > * {\n\t\t\tcolor: var(--color-primary-element);\n\t\t}\n\n\t\t.checkbox-content__icon--checked > * {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t}\n\t}\n\n\t&--has-text {\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&, * {\n\t\tcursor: pointer;\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n","\n\n<docs>\n\n### General description\n\nThis is a simple input checkbox, radio and switch design.\nPlease have a look at proper usage and recommendations: https://material.io/components/checkboxes\n\nNote: All attributes on the element are passed to the inner input element - except for the button type.\n\n### Standard checkbox\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\">Enable sharing (v-model)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch :model-value=\"sharingEnabled\" :loading=\"loading\" @update:modelValue=\"onToggle\">Enable sharing (with request loading)</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tloading: false,\n\t\t\tsharingEnabled: false,\n\t\t}\n\t},\n\tmethods: {\n\t\tonToggle() {\n\t\t\tthis.loading = true\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.sharingEnabled = !this.sharingEnabled\n\t\t\t\tthis.loading = false\n\t\t\t}, 1000)\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard radio set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"rw\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"rwx\" name=\"sharing_permission_radio\" type=\"radio\">Default permission read+write+execute</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tsharingPermission: 'r',\n\t\t\t}\n\t\t}\n\t}\n</script>\n```\n\n### Standard radio set with alternative button style\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"r\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"sharingPermission\"\n\t\t\t\tvalue=\"rw\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDefault permission read+write\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: 'r',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Radio set with button style and icons\n```vue\n<template>\n\t<div>\n\t\t<h4>Horizontal</h4>\n\t\t<div style=\"display: flex\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"horizontal\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\t<h4>Vertically</h4>\n\t\t<div style=\"width: fit-content\">\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"y\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tEnable settings\n\t\t\t\t<template #icon><CheckIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t\t<NcCheckboxRadioSwitch\n\t\t\t\t:button-variant=\"true\"\n\t\t\t\tv-model=\"enableSettings\"\n\t\t\t\tvalue=\"n\"\n\t\t\t\tname=\"sharing_permission_radio\"\n\t\t\t\ttype=\"radio\"\n\t\t\t\tbutton-variant-grouped=\"vertical\">\n\t\t\t\tDisable settings\n\t\t\t\t<template #icon><CancelIcon :size=\"20\"></template>\n\t\t\t</NcCheckboxRadioSwitch>\n\t\t</div>\n\t\tSettings enabled: {{ enableSettings === 'y' ? 'yes' : 'no' }}\n\t</div>\n</template>\n<script>\nimport CheckIcon from 'vue-material-design-icons/Check.vue'\nimport CancelIcon from 'vue-material-design-icons/Cancel.vue'\nexport default {\n\tcomponents: {\n\t\tCheckIcon,\n\t\tCancelIcon,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tenableSettings: 'n',\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard checkbox set\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch :disabled=\"true\" v-model=\"sharingPermission\" value=\"r\" name=\"sharing_permission\">Permission read</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"w\" name=\"sharing_permission\">Permission write</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"d\" name=\"sharing_permission\">Permission delete</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingPermission\" value=\"x\" name=\"sharing_permission\">Permission execute</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingPermission: {{ sharingPermission }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingPermission: ['r', 'd'],\n\t\t}\n\t}\n}\n</script>\n```\n\n### Standard switch\n```vue\n<template>\n\t<div>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\">Enable sharing</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\">Enable sharing (v-model)</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"sharingEnabled\" type=\"switch\" :disabled=\"true\">Enable sharing (disabled)</NcCheckboxRadioSwitch>\n\t\t<br>\n\t\tsharingEnabled: {{ sharingEnabled }}\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tsharingEnabled: true,\n\t\t}\n\t},\n}\n</script>\n```\n\n</docs>\n\n<template>\n\t<component :is=\"computedWrapperElement\"\n\t\t:id=\"wrapperId\"\n\t\t:aria-label=\"isButtonType && ariaLabel ? ariaLabel : undefined\"\n\t\t:class=\"{\n\t\t\t['checkbox-radio-switch-' + type]: type,\n\t\t\t'checkbox-radio-switch--checked': isChecked,\n\t\t\t'checkbox-radio-switch--disabled': disabled,\n\t\t\t'checkbox-radio-switch--indeterminate': hasIndeterminate ? indeterminate : false,\n\t\t\t'checkbox-radio-switch--button-variant': buttonVariant,\n\t\t\t'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical',\n\t\t\t'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal',\n\t\t\t'button-vue': isButtonType,\n\t\t}\"\n\t\tclass=\"checkbox-radio-switch\"\n\t\t:style=\"cssVars\"\n\t\t:type=\"isButtonType ? 'button' : null\"\n\t\tv-bind=\"isButtonType ? $attrs : dataAttrs\"\n\t\tv-on=\"isButtonType ? listeners : null\">\n\t\t<input v-if=\"!isButtonType\"\n\t\t\t:id=\"id\"\n\t\t\t:aria-labelledby=\"!isButtonType && !ariaLabel ? `${id}-label` : null\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\tclass=\"checkbox-radio-switch__input\"\n\t\t\t:disabled=\"disabled\"\n\t\t\t:type=\"inputType\"\n\t\t\t:value=\"value\"\n\t\t\t:checked=\"isChecked\"\n\t\t\t:indeterminate.prop=\"hasIndeterminate ? indeterminate : null\"\n\t\t\t:required=\"required\"\n\t\t\t:name=\"name\"\n\t\t\tv-bind=\"nonDataAttrs\"\n\t\t\tv-on=\"listeners\">\n\t\t<NcCheckboxContent :id=\"!isButtonType ? `${id}-label` : undefined\"\n\t\t\tclass=\"checkbox-radio-switch__content\"\n\t\t\ticon-class=\"checkbox-radio-switch__icon\"\n\t\t\ttext-class=\"checkbox-radio-switch__text\"\n\t\t\t:type=\"type\"\n\t\t\t:indeterminate=\"hasIndeterminate ? indeterminate : false\"\n\t\t\t:button-variant=\"buttonVariant\"\n\t\t\t:is-checked=\"isChecked\"\n\t\t\t:loading=\"loading\"\n\t\t\t:size=\"size\"\n\t\t\t@click.native=\"onToggle\">\n\t\t\t<template #icon>\n\t\t\t\t\n\t\t\t\t<slot name=\"icon\" />\n\t\t\t</template>\n\n\t\t\t\n\t\t\t<slot />\n\t\t</NcCheckboxContent>\n\t</component>\n</template>\n\n<script>\nimport { n, t } from '../../l10n.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport NcCheckboxContent, { TYPE_BUTTON, TYPE_CHECKBOX, TYPE_RADIO, TYPE_SWITCH } from './NcCheckboxContent.vue'\nimport { useModelMigration } from '../../composables/useModelMigration.ts'\n\nexport default {\n\tname: 'NcCheckboxRadioSwitch',\n\n\tcomponents: {\n\t\tNcCheckboxContent,\n\t},\n\n\t// We need to pass attributes to the input element\n\tinheritAttrs: false,\n\n\tmodel: {\n\t\tprop: 'modelValue',\n\t\tevent: 'update:modelValue',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * Unique id attribute of the input\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'checkbox-radio-switch-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\n\t\t/**\n\t\t * Unique id attribute of the wrapper element\n\t\t */\n\t\twrapperId: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Input name. Required for radio, optional for checkbox, and ignored\n\t\t * for button.\n\t\t */\n\t\tname: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Required if no text is set.\n\t\t * The aria-label is forwarded to the input or button.\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Type of the input. checkbox, radio, switch, or button.\n\t\t *\n\t\t * Only use button when used in a `tablist` container and the\n\t\t * `tab` role is set.\n\t\t *\n\t\t * @type {'checkbox'|'radio'|'switch'|'button'}\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'checkbox',\n\t\t\tvalidator: type => [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_SWITCH,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t].includes(type),\n\t\t},\n\n\t\t/**\n\t\t * Toggle the alternative button style\n\t\t */\n\t\tbuttonVariant: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Are the elements are all direct siblings?\n\t\t * If so they will be grouped horizontally or vertically\n\t\t *\n\t\t * @type {'no'|'horizontal'|'vertical'}\n\t\t */\n\t\tbuttonVariantGrouped: {\n\t\t\ttype: String,\n\t\t\tdefault: 'no',\n\t\t\tvalidator: v => ['no', 'vertical', 'horizontal'].includes(v),\n\t\t},\n\n\t\t/**\n\t\t * Removed in v9 - use `modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\tchecked: {\n\t\t\ttype: [Boolean, Array, String],\n\t\t\tdefault: undefined,\n\t\t},\n\n\t\t/**\n\t\t * Checkbox value\n\t\t */\n\t\tmodelValue: {\n\t\t\ttype: [Boolean, Array, String],\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Value to be synced on check\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Disabled state\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Indeterminate state\n\t\t */\n\t\tindeterminate: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Required state\n\t\t */\n\t\trequired: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * Wrapping element tag\n\t\t *\n\t\t * When `type` is set to `button` this will be ignored\n\t\t *\n\t\t * Defaults to `span`\n\t\t */\n\t\twrapperElement: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t},\n\n\temits: [\n\t\t/**\n\t\t * Removed in v9 - use `update:modelValue` (`v-model`) instead\n\t\t * @deprecated\n\t\t */\n\t\t'update:checked',\n\t\t'update:modelValue',\n\t\t/** Same as update:modelValue for Vue 2 compatibility */\n\t\t'update:model-value',\n\t],\n\n\tsetup() {\n\t\tconst model = useModelMigration('checked', 'update:checked')\n\t\treturn {\n\t\t\tmodel,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tdataAttrs() {\n\t\t\t// filter all data attributes\n\t\t\treturn Object.fromEntries(Object.entries(this.$attrs)\n\t\t\t\t.filter(([key]) => key.startsWith('data-')))\n\t\t},\n\n\t\tnonDataAttrs() {\n\t\t\t// filter all non-data attributes\n\t\t\treturn Object.fromEntries(Object.entries(this.$attrs)\n\t\t\t\t.filter(([key]) => !key.startsWith('data-')))\n\t\t},\n\n\t\tisButtonType() {\n\t\t\treturn this.type === TYPE_BUTTON\n\t\t},\n\n\t\tcomputedWrapperElement() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn 'button'\n\t\t\t}\n\t\t\tif (this.wrapperElement !== null) {\n\t\t\t\treturn this.wrapperElement\n\t\t\t}\n\t\t\treturn 'span'\n\t\t},\n\n\t\tlisteners() {\n\t\t\tif (this.isButtonType) {\n\t\t\t\treturn {\n\t\t\t\t\tclick: this.onToggle,\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tchange: this.onToggle,\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Icon size\n\t\t *\n\t\t * @return {number}\n\t\t */\n\t\tsize() {\n\t\t\treturn this.type === TYPE_SWITCH\n\t\t\t\t? 36\n\t\t\t\t: 24\n\t\t},\n\n\t\t/**\n\t\t * Css local variables for this component\n\t\t *\n\t\t * @return {object}\n\t\t */\n\t\tcssVars() {\n\t\t\treturn {\n\t\t\t\t'--icon-size': this.size + 'px',\n\t\t\t\t'--icon-height': (this.type === TYPE_SWITCH ? 16 : this.size) + 'px',\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Return the input type.\n\t\t * Switch is not an official type\n\t\t *\n\t\t * @return {string}\n\t\t */\n\t\tinputType() {\n\t\t\tconst nativeTypes = [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t\tTYPE_BUTTON,\n\t\t\t]\n\t\t\tif (nativeTypes.includes(this.type)) {\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn TYPE_CHECKBOX\n\t\t},\n\n\t\t/**\n\t\t * Check if that entry is checked\n\t\t * If value is defined, we use that as the checked value\n\t\t * If not, we expect true/false in checked state\n\t\t *\n\t\t * @return {boolean}\n\t\t */\n\t\tisChecked() {\n\t\t\tif (this.value !== null) {\n\t\t\t\tif (Array.isArray(this.model)) {\n\t\t\t\t\treturn [...this.model].indexOf(this.value) > -1\n\t\t\t\t}\n\t\t\t\treturn this.model === this.value\n\t\t\t}\n\t\t\treturn this.model === true\n\t\t},\n\n\t\thasIndeterminate() {\n\t\t\treturn [\n\t\t\t\tTYPE_CHECKBOX,\n\t\t\t\tTYPE_RADIO,\n\t\t\t].includes(this.inputType)\n\t\t},\n\t},\n\n\tmounted() {\n\t\tif (this.name && this.type === TYPE_CHECKBOX) {\n\t\t\tif (!Array.isArray(this.model)) {\n\t\t\t\tthrow new Error('When using groups of checkboxes, the updated value will be an array.')\n\t\t\t}\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (this.name && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches are not made to be used for data sets. Please use checkboxes instead.')\n\t\t}\n\n\t\t// https://material.io/components/checkboxes#usage\n\t\tif (typeof this.model !== 'boolean' && this.type === TYPE_SWITCH) {\n\t\t\tthrow new Error('Switches can only be used with boolean as checked prop.')\n\t\t}\n\t},\n\n\tmethods: {\n\t\tt,\n\t\tn,\n\n\t\tonToggle(event) {\n\t\t\tif (this.disabled || event.target.tagName.toLowerCase() === 'a') {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_RADIO) {\n\t\t\t\tthis.model = this.value\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If this is a radio, there can only be one value\n\t\t\tif (this.type === TYPE_SWITCH) {\n\t\t\t\tthis.model = !this.isChecked\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// If the initial value was a boolean, let's keep it that way\n\t\t\tif (typeof this.model === 'boolean') {\n\t\t\t\tthis.model = !this.model\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// Dispatch the checked values as an array if multiple, or single value otherwise\n\t\t\tconst values = this.getInputsSet()\n\t\t\t\t.filter(input => input.checked)\n\t\t\t\t.map(input => input.value)\n\n\t\t\tif (values.includes(this.value)) {\n\t\t\t\tthis.model = values.filter((v) => v !== this.value)\n\t\t\t} else {\n\t\t\t\tthis.model = [...values, this.value]\n\t\t\t}\n\t\t},\n\n\t\t/**\n\t\t * Get the input set based on this name\n\t\t *\n\t\t * @return {Node[]}\n\t\t */\n\t\tgetInputsSet() {\n\t\t\treturn [...document.getElementsByName(this.name)]\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.checkbox-radio-switch {\n\tdisplay: flex;\n\talign-items: center;\n\tcolor: var(--color-main-text);\n\tbackground-color: transparent;\n\tfont-size: var(--default-font-size);\n\tline-height: var(--default-line-height);\n\tpadding: 0;\n\tposition: relative;\n\n\t&__input {\n\t\tposition: absolute;\n\t\tz-index: -1;\n\t\topacity: 0 !important; // We need !important, or it gets overwritten by server style\n\t\twidth: var(--icon-size);\n\t\theight: var(--icon-size);\n\t\t// Same as label padding\n\t\tmargin: 4px $icon-margin;\n\t}\n\n\t&__input:focus-visible + &__content,\n\t&__input:focus-visible {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tborder-color: var(--color-main-background);\n\t\toutline-offset: -2px;\n\t}\n\n\t&--disabled &__content {\n\t\topacity: $opacity_disabled;\n\t\t:deep(.checkbox-radio-switch__icon) > * {\n\t\t\tcolor: var(--color-main-text)\n\t\t}\n\t\t&.checkbox-content,\n\t\t&.checkbox-content :deep(*:not(a)) {\n\t\t\tcursor: default !important;\n\t\t}\n\t}\n\n\t&:not(&--disabled, &--checked):focus-within &__content,\n\t&:not(&--disabled, &--checked) &__content:hover {\n\t\tbackground-color: var(--color-background-hover);\n\t}\n\n\t&--checked:not(&--disabled):focus-within &__content,\n\t&--checked:not(&--disabled) &__content:hover {\n\t\tbackground-color: var(--color-primary-element-hover);\n\t}\n\n\t&--checked:not(&--button-variant):not(&--disabled):focus-within &__content,\n\t&--checked:not(&--button-variant):not(&--disabled) &__content:hover {\n\t\tbackground-color: var(--color-primary-element-light-hover);\n\t}\n\n\t// Switch specific rules\n\t&-switch:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-text-maxcontrast);\n\t}\n\n\t// If switch is checked AND disabled, use the fade primary colour\n\t&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-primary-element-light);\n\t}\n\n\t--checkbox-radio-switch--border-radius: var(--border-radius-element, calc(var(--default-clickable-area) / 2));\n\t// keep inner border width in mind\n\t--checkbox-radio-switch--border-radius-outer: calc(var(--checkbox-radio-switch--border-radius) + 2px);\n\n\t&--button-variant.checkbox-radio-switch {\n\t\tbackground-color: var(--color-main-background);\n\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\toverflow: hidden;\n\n\t\t&--checked {\n\t\t\tfont-weight: bold;\n\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tbackground-color: var(--color-primary-element);\n\t\t\t\tcolor: var(--color-primary-element-text);\n\t\t\t}\n\t\t}\n\t}\n\n\t// Text overflow of button style\n\t&--button-variant :deep(.checkbox-radio-switch__text) {\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\twhite-space: nowrap;\n\t\twidth: 100%;\n\t}\n\n\t// Set icon color for non active elements to main text color\n\t&--button-variant:not(&--checked) :deep(.checkbox-radio-switch__icon) > * {\n\t\tcolor: var(--color-main-text);\n\t}\n\n\t// Hide icon container if empty to remove virtual padding\n\t&--button-variant :deep(.checkbox-radio-switch__icon:empty) {\n\t\tdisplay: none;\n\t}\n\n\t&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped),\n\t&--button-variant &__content {\n\t\tborder-radius: var(--checkbox-radio-switch--border-radius);\n\t}\n\n\t/* Special rules for vertical button groups */\n\t&--button-variant-v-grouped &__content {\n\t\tflex-basis: 100%;\n\t\t// vertically grouped buttons should all have the same width\n\t\tmax-width: unset;\n\t}\n\t&--button-variant-v-grouped {\n\t\t&:first-of-type {\n\t\t\tborder-start-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-start-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-end-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\n\t\t// remove borders between elements\n\t\t&:not(:last-of-type) {\n\t\t\tborder-bottom: 0!important;\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tmargin-bottom: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-top: 0!important;\n\t\t}\n\t}\n\n\t/* Special rules for horizontal button groups */\n\t&--button-variant-h-grouped {\n\t\t&:first-of-type {\n\t\t\tborder-start-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-start-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\t\t&:last-of-type {\n\t\t\tborder-start-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t\tborder-end-end-radius: var(--checkbox-radio-switch--border-radius-outer);\n\t\t}\n\n\t\t// remove borders between elements\n\t\t&:not(:last-of-type) {\n\t\t\tborder-inline-end: 0!important;\n\t\t\t.checkbox-radio-switch__content {\n\t\t\t\tmargin-inline-end: 2px;\n\t\t\t}\n\t\t}\n\t\t&:not(:first-of-type) {\n\t\t\tborder-inline-start: 0!important;\n\t\t}\n\t}\n\t&--button-variant-h-grouped :deep(.checkbox-radio-switch__text) {\n\t\ttext-align: center;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\t&--button-variant-h-grouped &__content {\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\twidth: 100%;\n\t\tmargin: 0;\n\t\tgap: 0;\n\t}\n}\n</style>\n"],"names":["_sfc_main"],"mappings":"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","x_google_ignoreList":[0,1,2,3,4,5,6]}

package/dist/chunks/NcDateTime-C-kLQayi.cjs DELETED Viewed

@@ -1,158 +0,0 @@
-"use strict";
-const Vue = require("vue");
-const l10n = require("@nextcloud/l10n");
-const _l10n = require("./_l10n-BiiXtYiP.cjs");
-const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
-_l10n.register(_l10n.t2);
-const FEW_SECONDS_AGO = {
-  long: _l10n.t("a few seconds ago"),
-  short: _l10n.t("seconds ago"),
-  // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
-  narrow: _l10n.t("sec. ago")
-  // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
-};
-function useFormatDateTime(timestamp = Date.now(), opts = {}) {
-  const currentTime = Vue.ref(Date.now());
-  let intervalId;
-  const options = Vue.ref({
-    format: {
-      timeStyle: "medium",
-      dateStyle: "short"
-    },
-    relativeTime: "long",
-    ignoreSeconds: false,
-    ...Vue.unref(opts)
-  });
-  const wrappedOptions = Vue.computed(() => ({ ...Vue.unref(opts), ...options.value }));
-  const date = Vue.computed(() => new Date(Vue.unref(timestamp)));
-  const formattedFullTime = Vue.computed(() => {
-    const formatter = new Intl.DateTimeFormat(l10n.getCanonicalLocale(), wrappedOptions.value.format);
-    return formatter.format(date.value);
-  });
-  const formattedTime = Vue.computed(() => {
-    if (wrappedOptions.value.relativeTime !== false) {
-      const formatter = new Intl.RelativeTimeFormat(l10n.getLanguage(), { numeric: "auto", style: wrappedOptions.value.relativeTime });
-      const diff = date.value.getTime() - currentTime.value;
-      const seconds = diff / 1e3;
-      if (Math.abs(seconds) < 59.5) {
-        if (wrappedOptions.value.ignoreSeconds) {
-          return FEW_SECONDS_AGO[wrappedOptions.value.relativeTime];
-        } else {
-          return formatter.format(Math.round(seconds), "second");
-        }
-      }
-      const minutes = seconds / 60;
-      if (Math.abs(minutes) <= 59) {
-        return formatter.format(Math.round(minutes), "minute");
-      }
-      const hours = minutes / 60;
-      if (Math.abs(hours) < 23.5) {
-        return formatter.format(Math.round(hours), "hour");
-      }
-      const days = hours / 24;
-      if (Math.abs(days) < 6.5) {
-        return formatter.format(Math.round(days), "day");
-      }
-      if (Math.abs(days) < 27.5) {
-        const weeks = days / 7;
-        return formatter.format(Math.round(weeks), "week");
-      }
-      const months = days / 30;
-      if (Math.abs(months) < 11.5) {
-        return formatter.format(Math.round(months), "month");
-      }
-      return formatter.format(Math.round(days / 365), "year");
-    }
-    return formattedFullTime.value;
-  });
-  Vue.watch([wrappedOptions], () => {
-    window.clearInterval(intervalId);
-    intervalId = void 0;
-    if (wrappedOptions.value.relativeTime) {
-      intervalId = window.setInterval(() => {
-        currentTime.value = Date.now();
-      }, 1e3);
-    }
-  });
-  Vue.onMounted(() => {
-    if (wrappedOptions.value.relativeTime !== false) {
-      intervalId = window.setInterval(() => {
-        currentTime.value = Date.now();
-      }, 1e3);
-    }
-  });
-  Vue.onUnmounted(() => {
-    window.clearInterval(intervalId);
-  });
-  return {
-    formattedTime,
-    formattedFullTime,
-    options
-  };
-}
-const _sfc_main = {
-  name: "NcDateTime",
-  props: {
-    /**
-     * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object
-     */
-    timestamp: {
-      type: [Date, Number],
-      required: true
-    },
-    /**
-     * The format used for displaying, or if relative time is used the format used for the title (optional)
-     *
-     * @type {Intl.DateTimeFormatOptions}
-     */
-    format: {
-      type: Object,
-      default: () => ({ timeStyle: "medium", dateStyle: "short" })
-    },
-    /**
-     * Wether to display the timestamp as time from now (optional)
-     *
-     * - `false`: Disable relative time
-     * - `'long'`: Long text, like *2 seconds ago* (default)
-     * - `'short'`: Short text, like *2 sec. ago*
-     * - `'narrow'`: Even shorter text (same as `'short'` on some languages)
-     */
-    relativeTime: {
-      type: [Boolean, String],
-      default: "long",
-      validator: (v) => v === false || ["long", "short", "narrow"].includes(v)
-    },
-    /**
-     * Ignore seconds when displaying the relative time and just show `a few seconds ago`
-     */
-    ignoreSeconds: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const timestamp = Vue.computed(() => props.timestamp);
-    const { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props);
-    return {
-      formattedTime,
-      formattedFullTime
-    };
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("span", { staticClass: "nc-datetime", attrs: { "data-timestamp": _vm.timestamp, "title": _vm.formattedFullTime }, domProps: { "textContent": _vm._s(_vm.formattedTime) } });
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const NcDateTime = __component__.exports;
-exports.NcDateTime = NcDateTime;
-exports.useFormatDateTime = useFormatDateTime;
-//# sourceMappingURL=NcDateTime-C-kLQayi.cjs.map

package/dist/chunks/NcDateTime-C-kLQayi.cjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcDateTime-C-kLQayi.cjs","sources":["../../src/composables/useFormatDateTime.ts","../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } from 'vue'\nimport { t } from '../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\ninterface FormatDateOptions {\n\t/**\n\t * The format used for displaying, or if relative time is used the format used for the title\n\t */\n\tformat?: Intl.DateTimeFormatOptions\n\t/**\n\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t */\n\tignoreSeconds?: boolean\n\t/**\n\t * Wether to display the timestamp as time from now\n\t */\n\trelativeTime?: false | 'long' | 'short' | 'narrow'\n}\n\ntype MaybeRef<T> = T | Ref<T>\n\n/**\n * Composable for formatting time stamps using current users locale and language\n *\n * @param {Date | number | import('vue').Ref<Date> | import('vue').Ref<number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false | 'long' | 'short' | 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n */\nexport function useFormatDateTime(\n\ttimestamp: MaybeRef<Date|number> = Date.now(),\n\topts: MaybeRef<FormatDateOptions> = {},\n) {\n\t// Current time as Date.now is not reactive\n\tconst currentTime = ref(Date.now())\n\t// The interval ID for the window\n\tlet intervalId: number|undefined\n\n\tconst options = ref({\n\t\tformat: {\n\t\t\ttimeStyle: 'medium',\n\t\t\tdateStyle: 'short',\n\t\t} as Intl.DateTimeFormatOptions,\n\t\trelativeTime: 'long' as const,\n\t\tignoreSeconds: false,\n\t\t...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...unref(opts), ...options.value }))\n\n\t/** ECMA Date object of the timestamp */\n\tconst date = computed(() => new Date(unref(timestamp)))\n\n\tconst formattedFullTime = computed<string>(() => {\n\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)\n\t\treturn formatter.format(date.value)\n\t})\n\n\t/** Time string formatted for main text */\n\tconst formattedTime = computed<string>(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tconst formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })\n\n\t\t\tconst diff = date.value.getTime() - currentTime.value\n\t\t\tconst seconds = diff / 1000\n\t\t\tif (Math.abs(seconds) < 59.5) {\n\t\t\t\tif (wrappedOptions.value.ignoreSeconds) {\n\t\t\t\t\treturn FEW_SECONDS_AGO[wrappedOptions.value.relativeTime]\n\t\t\t\t} else {\n\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst minutes = seconds / 60\n\t\t\tif (Math.abs(minutes) <= 59) {\n\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t}\n\t\t\tconst hours = minutes / 60\n\t\t\tif (Math.abs(hours) < 23.5) {\n\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t}\n\t\t\tconst days = hours / 24\n\t\t\tif (Math.abs(days) < 6.5) {\n\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t}\n\t\t\tif (Math.abs(days) < 27.5) {\n\t\t\t\tconst weeks = days / 7\n\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t}\n\t\t\tconst months = days / 30\n\t\t\tif (Math.abs(months) < 11.5) {\n\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t}\n\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t}\n\t\treturn formattedFullTime.value\n\t})\n\n\t// Set or clear interval if relative time is dis/enabled\n\twatch([wrappedOptions], () => {\n\t\twindow.clearInterval(intervalId)\n\t\tintervalId = undefined\n\t\tif (wrappedOptions.value.relativeTime) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// Start the interval for setting the current time if relative time is enabled\n\tonMounted(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// ensure interval is cleared\n\tonUnmounted(() => {\n\t\twindow.clearInterval(intervalId)\n\t})\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t\toptions,\n\t}\n}\n","\n\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples *6 seconds ago*.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/** For allowed formats see the Intl.DateTimeFormat options */\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\"\n\t\tv-text=\"formattedTime\" />\n</template>\n\n<script>\nimport { computed } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.ts'\n\nexport default {\n\tname: 'NcDateTime',\n\n\tprops: {\n\t\t/**\n\t\t * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t */\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t *\n\t\t * @type {Intl.DateTimeFormatOptions}\n\t\t */\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/**\n\t\t * Wether to display the timestamp as time from now (optional)\n\t\t *\n\t\t * - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like *2 seconds ago* (default)\n\t\t * - `'short'`: Short text, like *2 sec. ago*\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t */\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false || ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/**\n\t\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst timestamp = computed(() => props.timestamp)\n\t\tconst { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props)\n\t\treturn {\n\t\t\tformattedTime,\n\t\t\tformattedFullTime,\n\t\t}\n\t},\n}\n</script>\n"],"names":["t","ref","unref","computed","getCanonicalLocale","getLanguage","watch","onMounted","onUnmounted"],"mappings":"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"}

package/dist/chunks/NcDateTime-DshRFtUU.mjs DELETED Viewed

@@ -1,159 +0,0 @@
-import { ref, unref, computed, watch, onMounted, onUnmounted } from "vue";
-import { getCanonicalLocale, getLanguage } from "@nextcloud/l10n";
-import { r as register, l as t2, a as t } from "./_l10n-DQgzdF9S.mjs";
-import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
-register(t2);
-const FEW_SECONDS_AGO = {
-  long: t("a few seconds ago"),
-  short: t("seconds ago"),
-  // FOR TRANSLATORS: Shorter version of 'a few seconds ago'
-  narrow: t("sec. ago")
-  // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'
-};
-function useFormatDateTime(timestamp = Date.now(), opts = {}) {
-  const currentTime = ref(Date.now());
-  let intervalId;
-  const options = ref({
-    format: {
-      timeStyle: "medium",
-      dateStyle: "short"
-    },
-    relativeTime: "long",
-    ignoreSeconds: false,
-    ...unref(opts)
-  });
-  const wrappedOptions = computed(() => ({ ...unref(opts), ...options.value }));
-  const date = computed(() => new Date(unref(timestamp)));
-  const formattedFullTime = computed(() => {
-    const formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format);
-    return formatter.format(date.value);
-  });
-  const formattedTime = computed(() => {
-    if (wrappedOptions.value.relativeTime !== false) {
-      const formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: "auto", style: wrappedOptions.value.relativeTime });
-      const diff = date.value.getTime() - currentTime.value;
-      const seconds = diff / 1e3;
-      if (Math.abs(seconds) < 59.5) {
-        if (wrappedOptions.value.ignoreSeconds) {
-          return FEW_SECONDS_AGO[wrappedOptions.value.relativeTime];
-        } else {
-          return formatter.format(Math.round(seconds), "second");
-        }
-      }
-      const minutes = seconds / 60;
-      if (Math.abs(minutes) <= 59) {
-        return formatter.format(Math.round(minutes), "minute");
-      }
-      const hours = minutes / 60;
-      if (Math.abs(hours) < 23.5) {
-        return formatter.format(Math.round(hours), "hour");
-      }
-      const days = hours / 24;
-      if (Math.abs(days) < 6.5) {
-        return formatter.format(Math.round(days), "day");
-      }
-      if (Math.abs(days) < 27.5) {
-        const weeks = days / 7;
-        return formatter.format(Math.round(weeks), "week");
-      }
-      const months = days / 30;
-      if (Math.abs(months) < 11.5) {
-        return formatter.format(Math.round(months), "month");
-      }
-      return formatter.format(Math.round(days / 365), "year");
-    }
-    return formattedFullTime.value;
-  });
-  watch([wrappedOptions], () => {
-    window.clearInterval(intervalId);
-    intervalId = void 0;
-    if (wrappedOptions.value.relativeTime) {
-      intervalId = window.setInterval(() => {
-        currentTime.value = Date.now();
-      }, 1e3);
-    }
-  });
-  onMounted(() => {
-    if (wrappedOptions.value.relativeTime !== false) {
-      intervalId = window.setInterval(() => {
-        currentTime.value = Date.now();
-      }, 1e3);
-    }
-  });
-  onUnmounted(() => {
-    window.clearInterval(intervalId);
-  });
-  return {
-    formattedTime,
-    formattedFullTime,
-    options
-  };
-}
-const _sfc_main = {
-  name: "NcDateTime",
-  props: {
-    /**
-     * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object
-     */
-    timestamp: {
-      type: [Date, Number],
-      required: true
-    },
-    /**
-     * The format used for displaying, or if relative time is used the format used for the title (optional)
-     *
-     * @type {Intl.DateTimeFormatOptions}
-     */
-    format: {
-      type: Object,
-      default: () => ({ timeStyle: "medium", dateStyle: "short" })
-    },
-    /**
-     * Wether to display the timestamp as time from now (optional)
-     *
-     * - `false`: Disable relative time
-     * - `'long'`: Long text, like *2 seconds ago* (default)
-     * - `'short'`: Short text, like *2 sec. ago*
-     * - `'narrow'`: Even shorter text (same as `'short'` on some languages)
-     */
-    relativeTime: {
-      type: [Boolean, String],
-      default: "long",
-      validator: (v) => v === false || ["long", "short", "narrow"].includes(v)
-    },
-    /**
-     * Ignore seconds when displaying the relative time and just show `a few seconds ago`
-     */
-    ignoreSeconds: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const timestamp = computed(() => props.timestamp);
-    const { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props);
-    return {
-      formattedTime,
-      formattedFullTime
-    };
-  }
-};
-var _sfc_render = function render() {
-  var _vm = this, _c = _vm._self._c;
-  return _c("span", { staticClass: "nc-datetime", attrs: { "data-timestamp": _vm.timestamp, "title": _vm.formattedFullTime }, domProps: { "textContent": _vm._s(_vm.formattedTime) } });
-};
-var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null
-);
-const NcDateTime = __component__.exports;
-export {
-  NcDateTime as N,
-  useFormatDateTime as u
-};
-//# sourceMappingURL=NcDateTime-DshRFtUU.mjs.map

package/dist/chunks/NcDateTime-DshRFtUU.mjs.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"NcDateTime-DshRFtUU.mjs","sources":["../../src/composables/useFormatDateTime.ts","../../src/components/NcDateTime/NcDateTime.vue"],"sourcesContent":["/**\n * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport { getCanonicalLocale, getLanguage } from '@nextcloud/l10n'\nimport { computed, onUnmounted, ref, onMounted, watch, unref, type Ref } from 'vue'\nimport { t } from '../l10n.js'\n\nconst FEW_SECONDS_AGO = {\n\tlong: t('a few seconds ago'),\n\tshort: t('seconds ago'), // FOR TRANSLATORS: Shorter version of 'a few seconds ago'\n\tnarrow: t('sec. ago'), // FOR TRANSLATORS: If possible in your language an even shorter version of 'a few seconds ago'\n}\n\ninterface FormatDateOptions {\n\t/**\n\t * The format used for displaying, or if relative time is used the format used for the title\n\t */\n\tformat?: Intl.DateTimeFormatOptions\n\t/**\n\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t */\n\tignoreSeconds?: boolean\n\t/**\n\t * Wether to display the timestamp as time from now\n\t */\n\trelativeTime?: false | 'long' | 'short' | 'narrow'\n}\n\ntype MaybeRef<T> = T | Ref<T>\n\n/**\n * Composable for formatting time stamps using current users locale and language\n *\n * @param {Date | number | import('vue').Ref<Date> | import('vue').Ref<number>} timestamp Current timestamp\n * @param {object} opts Optional options\n * @param {Intl.DateTimeFormatOptions} opts.format The format used for displaying, or if relative time is used the format used for the title (optional)\n * @param {boolean} opts.ignoreSeconds Ignore seconds when displaying the relative time and just show `a few seconds ago`\n * @param {false | 'long' | 'short' | 'narrow'} opts.relativeTime Wether to display the timestamp as time from now (optional)\n */\nexport function useFormatDateTime(\n\ttimestamp: MaybeRef<Date|number> = Date.now(),\n\topts: MaybeRef<FormatDateOptions> = {},\n) {\n\t// Current time as Date.now is not reactive\n\tconst currentTime = ref(Date.now())\n\t// The interval ID for the window\n\tlet intervalId: number|undefined\n\n\tconst options = ref({\n\t\tformat: {\n\t\t\ttimeStyle: 'medium',\n\t\t\tdateStyle: 'short',\n\t\t} as Intl.DateTimeFormatOptions,\n\t\trelativeTime: 'long' as const,\n\t\tignoreSeconds: false,\n\t\t...unref(opts),\n\t})\n\tconst wrappedOptions = computed<Required<FormatDateOptions>>(() => ({ ...unref(opts), ...options.value }))\n\n\t/** ECMA Date object of the timestamp */\n\tconst date = computed(() => new Date(unref(timestamp)))\n\n\tconst formattedFullTime = computed<string>(() => {\n\t\tconst formatter = new Intl.DateTimeFormat(getCanonicalLocale(), wrappedOptions.value.format)\n\t\treturn formatter.format(date.value)\n\t})\n\n\t/** Time string formatted for main text */\n\tconst formattedTime = computed<string>(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tconst formatter = new Intl.RelativeTimeFormat(getLanguage(), { numeric: 'auto', style: wrappedOptions.value.relativeTime })\n\n\t\t\tconst diff = date.value.getTime() - currentTime.value\n\t\t\tconst seconds = diff / 1000\n\t\t\tif (Math.abs(seconds) < 59.5) {\n\t\t\t\tif (wrappedOptions.value.ignoreSeconds) {\n\t\t\t\t\treturn FEW_SECONDS_AGO[wrappedOptions.value.relativeTime]\n\t\t\t\t} else {\n\t\t\t\t\treturn formatter.format(Math.round(seconds), 'second')\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst minutes = seconds / 60\n\t\t\tif (Math.abs(minutes) <= 59) {\n\t\t\t\treturn formatter.format(Math.round(minutes), 'minute')\n\t\t\t}\n\t\t\tconst hours = minutes / 60\n\t\t\tif (Math.abs(hours) < 23.5) {\n\t\t\t\treturn formatter.format(Math.round(hours), 'hour')\n\t\t\t}\n\t\t\tconst days = hours / 24\n\t\t\tif (Math.abs(days) < 6.5) {\n\t\t\t\treturn formatter.format(Math.round(days), 'day')\n\t\t\t}\n\t\t\tif (Math.abs(days) < 27.5) {\n\t\t\t\tconst weeks = days / 7\n\t\t\t\treturn formatter.format(Math.round(weeks), 'week')\n\t\t\t}\n\t\t\tconst months = days / 30\n\t\t\tif (Math.abs(months) < 11.5) {\n\t\t\t\treturn formatter.format(Math.round(months), 'month')\n\t\t\t}\n\t\t\treturn formatter.format(Math.round(days / 365), 'year')\n\t\t}\n\t\treturn formattedFullTime.value\n\t})\n\n\t// Set or clear interval if relative time is dis/enabled\n\twatch([wrappedOptions], () => {\n\t\twindow.clearInterval(intervalId)\n\t\tintervalId = undefined\n\t\tif (wrappedOptions.value.relativeTime) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// Start the interval for setting the current time if relative time is enabled\n\tonMounted(() => {\n\t\tif (wrappedOptions.value.relativeTime !== false) {\n\t\t\tintervalId = window.setInterval(() => { currentTime.value = Date.now() }, 1000)\n\t\t}\n\t})\n\n\t// ensure interval is cleared\n\tonUnmounted(() => {\n\t\twindow.clearInterval(intervalId)\n\t})\n\n\treturn {\n\t\tformattedTime,\n\t\tformattedFullTime,\n\t\toptions,\n\t}\n}\n","\n\n<docs>\n\n### General description\n\nThis components purpose is to display a timestamp in the users local time format.\nIt also supports relative time, for examples *6 seconds ago*.\n\n#### Standard usage\n\nWithout any optional parameters the timestamp is displayed as a relative datetime and a title with the full date is added.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Ignore seconds\n\nIf you do not want the seconds to be counted up until minutes are reached you can simply use the `ignore-seconds` property.\n\n```vue\n<template>\n\t<NcDateTime :timestamp=\"timestamp\" :ignore-seconds=\"true\" />\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t}\n\t\t},\n\t}\n</script>\n```\n\n#### Custom date or time format\n\nThe component allows to format the full date for the title by settings the `format` property.\nIt is also possible to disable relative time by setting the `relativeTime` property to `false`.\n\n```vue\n<template>\n\t<div>\n\t\t<h4>Short relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" relative-time=\"short\" />\n\n\t\t<h4>Custom title format</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" />\n\n\t\t<h4>Without relative time</h4>\n\t\t<NcDateTime :timestamp=\"timestamp\" :format=\"timeFormat\" :relative-time=\"false\" />\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\ttimestamp: Date.now(),\n\t\t\t\t/** For allowed formats see the Intl.DateTimeFormat options */\n\t\t\t\ttimeFormat: {\n\t\t\t\t\tdateStyle: 'short',\n\t\t\t\t\ttimeStyle: 'full'\n\t\t\t\t},\n\t\t\t}\n\t\t},\n\t}\n</script>\n<style>\nh4 {\n\tfont-weight: bold;\n\tmargin-top: 12px;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<span class=\"nc-datetime\"\n\t\t:data-timestamp=\"timestamp\"\n\t\t:title=\"formattedFullTime\"\n\t\tv-text=\"formattedTime\" />\n</template>\n\n<script>\nimport { computed } from 'vue'\nimport { useFormatDateTime } from '../../composables/useFormatDateTime.ts'\n\nexport default {\n\tname: 'NcDateTime',\n\n\tprops: {\n\t\t/**\n\t\t * The timestamp to display, either an unix timestamp (in milliseconds) or a Date object\n\t\t */\n\t\ttimestamp: {\n\t\t\ttype: [Date, Number],\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * The format used for displaying, or if relative time is used the format used for the title (optional)\n\t\t *\n\t\t * @type {Intl.DateTimeFormatOptions}\n\t\t */\n\t\tformat: {\n\t\t\ttype: Object,\n\t\t\tdefault: () => ({ timeStyle: 'medium', dateStyle: 'short' }),\n\t\t},\n\t\t/**\n\t\t * Wether to display the timestamp as time from now (optional)\n\t\t *\n\t\t * - `false`: Disable relative time\n\t\t * - `'long'`: Long text, like *2 seconds ago* (default)\n\t\t * - `'short'`: Short text, like *2 sec. ago*\n\t\t * - `'narrow'`: Even shorter text (same as `'short'` on some languages)\n\t\t */\n\t\trelativeTime: {\n\t\t\ttype: [Boolean, String],\n\t\t\tdefault: 'long',\n\t\t\tvalidator: (v) => v === false || ['long', 'short', 'narrow'].includes(v),\n\t\t},\n\t\t/**\n\t\t * Ignore seconds when displaying the relative time and just show `a few seconds ago`\n\t\t */\n\t\tignoreSeconds: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tsetup(props) {\n\t\tconst timestamp = computed(() => props.timestamp)\n\t\tconst { formattedTime, formattedFullTime } = useFormatDateTime(timestamp, props)\n\t\treturn {\n\t\t\tformattedTime,\n\t\t\tformattedFullTime,\n\t\t}\n\t},\n}\n</script>\n"],"names":[],"mappings":";;;;;AASA,MAAM,kBAAkB;AAAA,EACvB,MAAM,EAAE,mBAAmB;AAAA,EAC3B,OAAO,EAAE,aAAa;AAAA;AAAA,EACtB,QAAQ,EAAE,UAAU;AAAA;AACrB;AA4BO,SAAS,kBACf,YAAmC,KAAK,OACxC,OAAoC,CAAA,GACnC;AAED,QAAM,cAAc,IAAI,KAAK,IAAA,CAAK;AAE9B,MAAA;AAEJ,QAAM,UAAU,IAAI;AAAA,IACnB,QAAQ;AAAA,MACP,WAAW;AAAA,MACX,WAAW;AAAA,IACZ;AAAA,IACA,cAAc;AAAA,IACd,eAAe;AAAA,IACf,GAAG,MAAM,IAAI;AAAA,EAAA,CACb;AACK,QAAA,iBAAiB,SAAsC,OAAO,EAAE,GAAG,MAAM,IAAI,GAAG,GAAG,QAAQ,MAAA,EAAQ;AAGnG,QAAA,OAAO,SAAS,MAAM,IAAI,KAAK,MAAM,SAAS,CAAC,CAAC;AAEhD,QAAA,oBAAoB,SAAiB,MAAM;AAC1C,UAAA,YAAY,IAAI,KAAK,eAAe,sBAAsB,eAAe,MAAM,MAAM;AACpF,WAAA,UAAU,OAAO,KAAK,KAAK;AAAA,EAAA,CAClC;AAGK,QAAA,gBAAgB,SAAiB,MAAM;AACxC,QAAA,eAAe,MAAM,iBAAiB,OAAO;AAChD,YAAM,YAAY,IAAI,KAAK,mBAAmB,YAAY,GAAG,EAAE,SAAS,QAAQ,OAAO,eAAe,MAAM,cAAc;AAE1H,YAAM,OAAO,KAAK,MAAM,YAAY,YAAY;AAChD,YAAM,UAAU,OAAO;AACvB,UAAI,KAAK,IAAI,OAAO,IAAI,MAAM;AACzB,YAAA,eAAe,MAAM,eAAe;AAChC,iBAAA,gBAAgB,eAAe,MAAM,YAAY;AAAA,QAAA,OAClD;AACN,iBAAO,UAAU,OAAO,KAAK,MAAM,OAAO,GAAG,QAAQ;AAAA,QAAA;AAAA,MACtD;AAED,YAAM,UAAU,UAAU;AAC1B,UAAI,KAAK,IAAI,OAAO,KAAK,IAAI;AAC5B,eAAO,UAAU,OAAO,KAAK,MAAM,OAAO,GAAG,QAAQ;AAAA,MAAA;AAEtD,YAAM,QAAQ,UAAU;AACxB,UAAI,KAAK,IAAI,KAAK,IAAI,MAAM;AAC3B,eAAO,UAAU,OAAO,KAAK,MAAM,KAAK,GAAG,MAAM;AAAA,MAAA;AAElD,YAAM,OAAO,QAAQ;AACrB,UAAI,KAAK,IAAI,IAAI,IAAI,KAAK;AACzB,eAAO,UAAU,OAAO,KAAK,MAAM,IAAI,GAAG,KAAK;AAAA,MAAA;AAEhD,UAAI,KAAK,IAAI,IAAI,IAAI,MAAM;AAC1B,cAAM,QAAQ,OAAO;AACrB,eAAO,UAAU,OAAO,KAAK,MAAM,KAAK,GAAG,MAAM;AAAA,MAAA;AAElD,YAAM,SAAS,OAAO;AACtB,UAAI,KAAK,IAAI,MAAM,IAAI,MAAM;AAC5B,eAAO,UAAU,OAAO,KAAK,MAAM,MAAM,GAAG,OAAO;AAAA,MAAA;AAEpD,aAAO,UAAU,OAAO,KAAK,MAAM,OAAO,GAAG,GAAG,MAAM;AAAA,IAAA;AAEvD,WAAO,kBAAkB;AAAA,EAAA,CACzB;AAGK,QAAA,CAAC,cAAc,GAAG,MAAM;AAC7B,WAAO,cAAc,UAAU;AAClB,iBAAA;AACT,QAAA,eAAe,MAAM,cAAc;AACzB,mBAAA,OAAO,YAAY,MAAM;AAAc,oBAAA,QAAQ,KAAK,IAAI;AAAA,SAAK,GAAI;AAAA,IAAA;AAAA,EAC/E,CACA;AAGD,YAAU,MAAM;AACX,QAAA,eAAe,MAAM,iBAAiB,OAAO;AACnC,mBAAA,OAAO,YAAY,MAAM;AAAc,oBAAA,QAAQ,KAAK,IAAI;AAAA,SAAK,GAAI;AAAA,IAAA;AAAA,EAC/E,CACA;AAGD,cAAY,MAAM;AACjB,WAAO,cAAc,UAAU;AAAA,EAAA,CAC/B;AAEM,SAAA;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AChCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,WAAA;AAAA,MACA,MAAA,CAAA,MAAA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,WAAA,UAAA,WAAA,QAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,cAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,MAAA,SAAA,CAAA,QAAA,SAAA,QAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,OAAA;AACA,UAAA,YAAA,SAAA,MAAA,MAAA,SAAA;AACA,UAAA,EAAA,eAAA,kBAAA,IAAA,kBAAA,WAAA,KAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}