@nextcloud/vue

Version:

Nextcloud vue components

github.com/nextcloud-libraries/nextcloud-vue

1 lines • 6.18 kB

Source Map (JSON)

{"version":3,"file":"NcAssistantButton-CjpLsI1X.mjs","sources":["../../src/components/NcAssistantButton/NcAssistantButton.vue"],"sourcesContent":["\n\n<docs>\n```vue\n<template>\n<div class=\"wrapper\">\n\t\n\t<div class=\"grid grid-3\">\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icon\" name=\"style\" type=\"radio\">Icon only</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"style\" value=\"icontext\" name=\"style\" type=\"radio\">Icon and text</NcCheckboxRadioSwitch>\n\t\t<NcCheckboxRadioSwitch v-model=\"disabled\" type=\"checkbox\">Disabled</NcCheckboxRadioSwitch>\n\t</div>\n\n\t<h5>Standard buttons</h5>\n\t<div class=\"grid\">\n\t\t<p>Secondary</p>\n\t\t<p>Primary</p>\n\t\t<NcAssistantButton\n\t\t\taria-label=\"Generate content\"\n\t\t\t:disabled\n\t\t\t:text>\n\t\t</NcAssistantButton>\n\t\t<NcAssistantButton\n\t\t\taria-label=\"Generate content\"\n\t\t\t:disabled\n\t\t\t:text\n\t\t\tvariant=\"primary\">\n\t\t</NcAssistantButton>\n\t</div>\n</div>\n\n</template>\n<script>\nimport Video from 'vue-material-design-icons/Video.vue'\n\nexport default {\n\tcomponents: {\n\t\tVideo,\n\t},\n\tdata() {\n\t\treturn {\n\t\t\tdisabled: false,\n\t\t\tstyle: 'icontext',\n\t\t}\n\t},\n\tcomputed: {\n\t\ttext() {\n\t\t\tif (this.style.includes('text')) {\n\t\t\t\treturn 'Generate content'\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tpadding: 0 12px;\n}\n\n.grid {\n\tdisplay: grid;\n\tgap: 12px;\n\tgrid-template-columns: 1fr 1fr;\n\tgrid-template-rows: repeat(auto-fill, auto);\n\tjustify-items: center;\n\tposition: relative;\n\tmargin: 12px 0;\n}\n\n.grid-3 {\n\tgrid-template-columns: 1fr 1fr 1fr;\n}\n\nh5 {\n\tfont-weight: bold;\n\tmargin: 40px 0 20px 0;\n}\n\np {\n\ttext-align: center;\n\tmargin: 4px 0 12px 0;\n\tcolor: var(--color-text-maxcontrast)\n}\n\nbutton {\n\tmargin: auto;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { mdiCreation } from '@mdi/js'\nimport NcAssistantIcon from '../NcAssistantIcon/NcAssistantIcon.vue'\nimport NcButton from '../NcButton/NcButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\n\nwithDefaults(defineProps<{\n\t/**\n\t * Toggles the disabled state of the button on and off.\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * The readable text of the button.\n\t * Can be overriden by using the `default` slot.\n\t *\n\t * If neither this is set nor the `default` slot is used, you will have to set at least `aria-label` or `aria-labelledby`.\n\t */\n\ttext?: string\n\n\t/**\n\t * The button variant.\n\t * In most cases the `secondary` style should be used.\n\t */\n\tvariant?: 'primary' | 'secondary'\n}>(), {\n\ttext: '',\n\tvariant: 'secondary',\n})\n\ndefineEmits<{\n\t/**\n\t * The mouse click event when the button is triggered.\n\t */\n\tclick: [MouseEvent]\n}>()\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[{\n\t\t\t[$style.assistantButton_disabled!]: disabled,\n\t\t\t[$style.assistantButton_primary!]: variant === 'primary',\n\t\t}, $style.assistantButton]\">\n\t\t<NcButton\n\t\t\t:class=\"$style.assistantButton__button\"\n\t\t\t:disabled\n\t\t\tvariant=\"tertiary\"\n\t\t\t@click=\"$emit('click', $event)\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper\n\t\t\t\t\tv-if=\"variant === 'primary'\"\n\t\t\t\t\t:class=\"$style.assistantButton__icon\"\n\t\t\t\t\t:path=\"mdiCreation\" />\n\t\t\t\t<NcAssistantIcon v-else />\n\t\t\t</template>\n\t\t\t<template v-if=\"text || $slots.default\" #default>\n\t\t\t\t<div :class=\"$style.assistantButton__text\">\n\t\t\t\t\t<slot>{{ text }}</slot>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<style module lang=\"scss\">\n.assistantButton {\n\t--assistant-button-color: var(--color-element-assistant, linear-gradient(238deg, #A569D3 12%, #00679E 39%, #422083 86%));\n\t--assistant-button-background-color: var(--color-background-assistant, #F6F5FF);\n\tbackground-image: var(--color-border-assistant, linear-gradient(125deg, #7398FE 50%, #6104A4 125%));\n\tborder-radius: var(--border-radius-element);\n\theight: var(--default-clickable-area);\n\twidth: fit-content;\n\tpadding-inline: 1px;\n\tpadding-block: 1px 2px;\n\n\t&_disabled {\n\t\tfilter: saturate(0.5);\n\t\topacity: 0.5;\n\t}\n\n\t&_primary {\n\t\t--assistant-button-color: white;\n\t\t--assistant-button-background-color: var(--color-element-assistant,linear-gradient(238deg, #A569D3 12%, #00679E 39%, #422083 86%));\n\n\t\t.assistantButton__icon,\n\t\t.assistantButton__text {\n\t\t\tcolor: white !important;\n\t\t}\n\t}\n\n\t&__button {\n\t\t--button-size: calc(var(--default-clickable-area) - 3px) !important;\n\t\tbackground-color: var(--assistant-button-background-color) !important;\n\t\tbackground-image: var(--assistant-button-background-color) !important;\n\t\tborder: none !important;\n\n\t\t&:hover {\n\t\t\tfilter: brightness(120%);\n\t\t}\n\t}\n\n\t&__text {\n\t\tbackground-image: var(--assistant-button-color);\n\t\tcolor: transparent !important;\n\t\tbackground-clip: text;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_normalizeClass","$style","disabled","variant","_createVNode","$emit","_createBlock","_unref","text","$slots","_createElementVNode","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;0BAsICA,mBAuBM,OAAA;AAAA,QAtBJ,OAAKC,eAAA,CAAA;AAAA,WAASC,KAAAA,OAAO,wBAAwB,GAAIC,KAAAA;AAAAA,WAAcD,KAAAA,OAAO,uBAAuB,GAAIE,KAAAA,YAAO;AAAA,QAAA,GAAqBF,KAAAA,OAAO,eAAe,CAAA;AAAA,MAAA;QAIpJG,YAiBW,UAAA;AAAA,UAhBT,OAAKJ,eAAEC,KAAAA,OAAO,uBAAuB;AAAA,UACrC,UAAAC,KAAAA;AAAAA,UACD,SAAQ;AAAA,UACP,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEG,KAAAA,MAAK,SAAU,MAAM;AAAA,QAAA;UAClB,cACV,MAGuB;AAAA,YAFhBF,KAAAA,YAAO,0BADdG,YAGuB,kBAAA;AAAA;cADrB,OAAKN,eAAEC,KAAAA,OAAO,qBAAqB;AAAA,cACnC,MAAMM,MAAA,WAAA;AAAA,YAAA,gDACRD,YAA0B,iBAAA,EAAA,KAAA,GAAA;AAAA,UAAA;;;UAEXE,KAAAA,QAAQC,KAAAA,OAAO;kBAAU;AAAA,wBACxC,MAEM;AAAA,cAFNC,mBAEM,OAAA;AAAA,gBAFA,OAAKV,eAAEC,KAAAA,OAAO,qBAAqB;AAAA,cAAA;gBACxCU,WAAuB,4BAAvB,MAAuB;AAAA,kDAAdH,KAAAA,IAAI,GAAA,CAAA;AAAA,gBAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}