@aotearoan/neon 18.2.6 → 18.2.7

package/dist/components/user-input/button/NeonButton.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const e=require("vue"),b=require("../../../common/enums/NeonButtonSize.cjs.js"),y=require("../../../common/enums/NeonFunctionalColor.cjs.js"),u=require("../../../common/enums/NeonButtonStyle.cjs.js"),S=require("../../../common/enums/NeonHorizontalPosition.cjs.js"),N=require("../../presentation/icon/NeonIcon.vue.cjs.js"),B=require("../../navigation/link/NeonLink.vue.cjs.js"),g=require("../../presentation/expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),o=require("../../../common/enums/NeonState.cjs.js"),h=e.defineComponent({name:"NeonButton",components:{NeonExpansionIndicator:g,NeonIcon:N,NeonLink:B},props:{href:{type:String,default:null},label:{type:String,default:null},size:{type:String,default:b.NeonButtonSize.Medium},color:{type:String,default:y.NeonFunctionalColor.LowContrast},inverse:{type:Boolean,default:!1},alternateColor:{type:String,default:null},icon:{type:String,default:null},iconPosition:{type:String,default:S.NeonHorizontalPosition.Left},buttonStyle:{type:String,default:u.NeonButtonStyle.Solid},state:{type:String,default:o.NeonState.Ready},disabled:{type:Boolean,default:!1},transparent:{type:Boolean,default:!1},outline:{type:Boolean,default:!0},circular:{type:Boolean,default:null},fullWidth:{type:Boolean,default:null},indicator:{type:Boolean,default:!1},indicatorExpanded:{type:Boolean,default:null}},emits:["click"],setup(t,{emit:a}){const i=e.useAttrs(),l=e.ref(null),c=e.computed(()=>{switch(t.state){case o.NeonState.Loading:return"loading";case o.NeonState.Success:return"check";case o.NeonState.Error:return"times";default:return t.icon}}),r=e.computed(()=>[`neon-button--${t.size}`,!t.inverse&&`neon-button--${t.color}`,`neon-button--${t.buttonStyle}`,`neon-button--state-${t.state}`,{"neon-button--text-transparent":t.transparent&&t.buttonStyle===u.NeonButtonStyle.Text,"neon-button--disabled":t.disabled,"neon-button--inverse":t.inverse,"neon-button--circular":t.circular,"neon-button--no-outline":!t.outline,"neon-button--full-width":t.fullWidth,"neon-button--with-icon neon-button--icon-only":!t.label&&t.icon&&!t.indicator,"neon-button--with-icon neon-button--icon-left":t.label&&t.icon&&t.iconPosition==="left","neon-button--with-icon neon-button--icon-right":t.label&&t.icon&&t.iconPosition==="right",[`neon-button--alternate-color-${t.alternateColor}`]:t.alternateColor}]),s=()=>{var n;return(n=l.value)==null?void 0:n.click()},d=e.computed(()=>{const{_onClick:n,...f}=i;return f});return{iconName:c,classes:r,button:l,attrs:i,sanitizedAttributes:d,clickLink:s,clickButton:()=>{var n;a("click"),(n=l.value)==null||n.blur()}}}});module.exports=h;
+"use strict";const e=require("vue"),b=require("../../../common/enums/NeonButtonSize.cjs.js"),y=require("../../../common/enums/NeonFunctionalColor.cjs.js"),u=require("../../../common/enums/NeonButtonStyle.cjs.js"),S=require("../../../common/enums/NeonHorizontalPosition.cjs.js"),N=require("../../presentation/icon/NeonIcon.vue.cjs.js"),B=require("../../navigation/link/NeonLink.vue.cjs.js"),g=require("../../presentation/expansion-indicator/NeonExpansionIndicator.vue.cjs.js"),o=require("../../../common/enums/NeonState.cjs.js"),h=e.defineComponent({name:"NeonButton",components:{NeonExpansionIndicator:g,NeonIcon:N,NeonLink:B},props:{href:{type:String,default:null},label:{type:String,default:null},size:{type:String,default:b.NeonButtonSize.Medium},color:{type:String,default:y.NeonFunctionalColor.LowContrast},inverse:{type:Boolean,default:!1},alternateColor:{type:String,default:null},icon:{type:String,default:null},iconPosition:{type:String,default:S.NeonHorizontalPosition.Left},buttonStyle:{type:String,default:u.NeonButtonStyle.Solid},state:{type:String,default:o.NeonState.Ready},disabled:{type:Boolean,default:!1},transparent:{type:Boolean,default:!1},outline:{type:Boolean,default:!0},circular:{type:Boolean,default:null},fullWidth:{type:Boolean,default:null},indicator:{type:Boolean,default:!1},indicatorExpanded:{type:Boolean,default:null}},emits:["click"],setup(t,{emit:a}){const i=e.useAttrs(),l=e.ref(null),c=e.computed(()=>{switch(t.state){case o.NeonState.Loading:return"loading";case o.NeonState.Success:return"check";case o.NeonState.Error:return"times";default:return t.icon}}),r=e.computed(()=>[`neon-button--${t.size}`,!t.inverse&&`neon-button--${t.color}`,`neon-button--${t.buttonStyle}`,`neon-button--state-${t.state}`,{"neon-button--text-transparent":t.transparent&&t.buttonStyle===u.NeonButtonStyle.Text,"neon-button--disabled":t.disabled,"neon-button--inverse":t.inverse,"neon-button--circular":t.circular,"neon-button--no-outline":!t.outline,"neon-button--full-width":t.fullWidth,"neon-button--with-icon neon-button--icon-only":!t.label&&t.icon&&!t.indicator,"neon-button--with-icon neon-button--icon-left":t.label&&t.icon&&t.iconPosition==="left","neon-button--with-icon neon-button--icon-right":t.label&&t.icon&&t.iconPosition==="right",[`neon-button--alternate-color-${t.alternateColor}`]:t.alternateColor}]),d=()=>{var n;return(n=l.value)==null?void 0:n.click()},s=e.computed(()=>{const{onClick:n,...f}=i;return f});return{iconName:c,classes:r,button:l,attrs:i,sanitizedAttributes:s,clickLink:d,clickButton:()=>{var n;t.disabled||a("click"),(n=l.value)==null||n.blur()}}}});module.exports=h;
 //# sourceMappingURL=NeonButton.cjs.js.map

package/dist/components/user-input/button/NeonButton.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonButton.cjs.js","sources":["../../../../src/components/user-input/button/NeonButton.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonButtonSize } from '@/common/enums/NeonButtonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';\nimport { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport { NeonState } from '@/common/enums/NeonState';\n\n/**\n * A button component. Renders an HTML button or, if an href is provided, renders using NeonLink in the style of a button. NeonButton supports all events and attributes of HTML buttons, e.g, @click.\n */\nexport default defineComponent({\n  name: 'NeonButton',\n  components: {\n    NeonExpansionIndicator,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * Optional href for rendering a button as a link\n     */\n    href: { type: String, default: null },\n    /**\n     * The text to display on a button\n     */\n    label: { type: String, default: null },\n    /**\n     * The button size\n     */\n    size: { type: String as () => NeonButtonSize, default: NeonButtonSize.Medium },\n    /**\n     * The button color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background.\n     * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported)\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Optional icon to display\n     */\n    icon: { type: String, default: null },\n    /**\n     * Position of the icon if combined with text\n     */\n    iconPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Left },\n    /**\n     * The style of button\n     */\n    buttonStyle: { type: String as () => NeonButtonStyle, default: NeonButtonStyle.Solid },\n    /**\n     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with icons) to reflect the state.\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * Whether the button is disabled\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * For text buttons, do not display the background. This is useful for icon buttons in headers.\n     */\n    transparent: { type: Boolean, default: false },\n    /**\n     * Whether to display a button outline when the button has focus\n     */\n    outline: { type: Boolean, default: true },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * Make a button extend to the full width of the parent container.\n     */\n    fullWidth: { type: Boolean, default: null },\n    /**\n     * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons)\n     * @ignore\n     */\n    indicator: { type: Boolean, default: false },\n    /**\n     * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as <em>open</em> or <em>closed</em>.\n     * @ignore\n     */\n    indicatorExpanded: { type: Boolean, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on the button or link.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const button = ref<HTMLElement | null>(null);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return 'check';\n        case NeonState.Error:\n          return 'times';\n        default:\n          return props.icon;\n      }\n    });\n\n    const classes = computed(() => {\n      return [\n        `neon-button--${props.size}`,\n        !props.inverse && `neon-button--${props.color}`,\n        `neon-button--${props.buttonStyle}`,\n        `neon-button--state-${props.state}`,\n        {\n          'neon-button--text-transparent': props.transparent && props.buttonStyle === NeonButtonStyle.Text,\n          'neon-button--disabled': props.disabled,\n          'neon-button--inverse': props.inverse,\n          'neon-button--circular': props.circular,\n          'neon-button--no-outline': !props.outline,\n          'neon-button--full-width': props.fullWidth,\n          'neon-button--with-icon neon-button--icon-only': !props.label && props.icon && !props.indicator,\n          'neon-button--with-icon neon-button--icon-left': props.label && props.icon && props.iconPosition === 'left',\n          'neon-button--with-icon neon-button--icon-right': props.label && props.icon && props.iconPosition === 'right',\n          [`neon-button--alternate-color-${props.alternateColor}`]: props.alternateColor,\n        },\n      ];\n    });\n\n    const clickLink = () => button.value?.click();\n\n    const sanitizedAttributes = computed(() => {\n      const { _onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const clickButton = () => {\n      emit('click');\n      button.value?.blur();\n    };\n\n    return {\n      iconName,\n      classes,\n      button,\n      attrs,\n      sanitizedAttributes,\n      clickLink,\n      clickButton,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonLink","NeonButtonSize","NeonFunctionalColor","NeonHorizontalPosition","NeonButtonStyle","NeonState","props","emit","attrs","useAttrs","button","ref","iconName","computed","classes","clickLink","_a","sanitizedAttributes","_onClick","sanitized"],"mappings":"ghBAaAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,uBAAAC,EACA,SAAAC,EACA,SAAAC,CACF,EACA,MAAO,CAIL,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAK,EAIpC,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAK,EAIrC,KAAM,CAAE,KAAM,OAAgC,QAASC,EAAAA,eAAe,MAAO,EAI7E,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAY,EAK7F,QAAS,CAAE,KAAM,QAAS,QAAS,EAAM,EAIzC,eAAgB,CAAE,KAAM,OAAqC,QAAS,IAAK,EAI3E,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAK,EAIpC,aAAc,CAAE,KAAM,OAAwC,QAASC,EAAAA,uBAAuB,IAAK,EAInG,YAAa,CAAE,KAAM,OAAiC,QAASC,EAAAA,gBAAgB,KAAM,EAIrF,MAAO,CAAE,KAAM,OAA2B,QAASC,EAAAA,UAAU,KAAM,EAInE,SAAU,CAAE,KAAM,QAAS,QAAS,EAAM,EAI1C,YAAa,CAAE,KAAM,QAAS,QAAS,EAAM,EAI7C,QAAS,CAAE,KAAM,QAAS,QAAS,EAAK,EAIxC,SAAU,CAAE,KAAM,QAAS,QAAS,IAAK,EAIzC,UAAW,CAAE,KAAM,QAAS,QAAS,IAAK,EAK1C,UAAW,CAAE,KAAM,QAAS,QAAS,EAAM,EAK3C,kBAAmB,CAAE,KAAM,QAAS,QAAS,IAAK,CACpD,EACA,MAAO,CAIL,OACF,EACA,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,WAERC,EAASC,MAAwB,IAAI,EAErCC,EAAWC,EAAAA,SAAS,IAAM,CAC9B,OAAQP,EAAM,MAAO,CACnB,KAAKD,EAAU,UAAA,QACN,MAAA,UACT,KAAKA,EAAU,UAAA,QACN,MAAA,QACT,KAAKA,EAAU,UAAA,MACN,MAAA,QACT,QACE,OAAOC,EAAM,IACjB,CAAA,CACD,EAEKQ,EAAUD,EAAAA,SAAS,IAChB,CACL,gBAAgBP,EAAM,IAAI,GAC1B,CAACA,EAAM,SAAW,gBAAgBA,EAAM,KAAK,GAC7C,gBAAgBA,EAAM,WAAW,GACjC,sBAAsBA,EAAM,KAAK,GACjC,CACE,gCAAiCA,EAAM,aAAeA,EAAM,cAAgBF,EAAgB,gBAAA,KAC5F,wBAAyBE,EAAM,SAC/B,uBAAwBA,EAAM,QAC9B,wBAAyBA,EAAM,SAC/B,0BAA2B,CAACA,EAAM,QAClC,0BAA2BA,EAAM,UACjC,gDAAiD,CAACA,EAAM,OAASA,EAAM,MAAQ,CAACA,EAAM,UACtF,gDAAiDA,EAAM,OAASA,EAAM,MAAQA,EAAM,eAAiB,OACrG,iDAAkDA,EAAM,OAASA,EAAM,MAAQA,EAAM,eAAiB,QACtG,CAAC,gCAAgCA,EAAM,cAAc,EAAE,EAAGA,EAAM,cAClE,CAAA,CAEH,EAEKS,EAAY,IAAM,OAAA,OAAAC,EAAAN,EAAO,QAAP,YAAAM,EAAc,SAEhCC,EAAsBJ,EAAAA,SAAS,IAAM,CACzC,KAAM,CAAE,SAAAK,EAAU,GAAGC,CAAA,EAAcX,EAC5B,OAAAW,CAAA,CACR,EAOM,MAAA,CACL,SAAAP,EACA,QAAAE,EACA,OAAAJ,EACA,MAAAF,EACA,oBAAAS,EACA,UAAAF,EACA,YAZkB,IAAM,OACxBR,EAAK,OAAO,GACZS,EAAAN,EAAO,QAAP,MAAAM,EAAc,MAAK,CAUnB,CAEJ,CACF,CAAC"}
+{"version":3,"file":"NeonButton.cjs.js","sources":["../../../../src/components/user-input/button/NeonButton.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonButtonSize } from '@/common/enums/NeonButtonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';\nimport { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport { NeonState } from '@/common/enums/NeonState';\n\n/**\n * A button component. Renders an HTML button or, if an href is provided, renders using NeonLink in the style of a button. NeonButton supports all events and attributes of HTML buttons, e.g, @click.\n */\nexport default defineComponent({\n  name: 'NeonButton',\n  components: {\n    NeonExpansionIndicator,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * Optional href for rendering a button as a link\n     */\n    href: { type: String, default: null },\n    /**\n     * The text to display on a button\n     */\n    label: { type: String, default: null },\n    /**\n     * The button size\n     */\n    size: { type: String as () => NeonButtonSize, default: NeonButtonSize.Medium },\n    /**\n     * The button color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background.\n     * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported)\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Optional icon to display\n     */\n    icon: { type: String, default: null },\n    /**\n     * Position of the icon if combined with text\n     */\n    iconPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Left },\n    /**\n     * The style of button\n     */\n    buttonStyle: { type: String as () => NeonButtonStyle, default: NeonButtonStyle.Solid },\n    /**\n     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with icons) to reflect the state.\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * Whether the button is disabled\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * For text buttons, do not display the background. This is useful for icon buttons in headers.\n     */\n    transparent: { type: Boolean, default: false },\n    /**\n     * Whether to display a button outline when the button has focus\n     */\n    outline: { type: Boolean, default: true },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * Make a button extend to the full width of the parent container.\n     */\n    fullWidth: { type: Boolean, default: null },\n    /**\n     * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons)\n     * @ignore\n     */\n    indicator: { type: Boolean, default: false },\n    /**\n     * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as <em>open</em> or <em>closed</em>.\n     * @ignore\n     */\n    indicatorExpanded: { type: Boolean, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on the button or link.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const button = ref<HTMLElement | null>(null);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return 'check';\n        case NeonState.Error:\n          return 'times';\n        default:\n          return props.icon;\n      }\n    });\n\n    const classes = computed(() => {\n      return [\n        `neon-button--${props.size}`,\n        !props.inverse && `neon-button--${props.color}`,\n        `neon-button--${props.buttonStyle}`,\n        `neon-button--state-${props.state}`,\n        {\n          'neon-button--text-transparent': props.transparent && props.buttonStyle === NeonButtonStyle.Text,\n          'neon-button--disabled': props.disabled,\n          'neon-button--inverse': props.inverse,\n          'neon-button--circular': props.circular,\n          'neon-button--no-outline': !props.outline,\n          'neon-button--full-width': props.fullWidth,\n          'neon-button--with-icon neon-button--icon-only': !props.label && props.icon && !props.indicator,\n          'neon-button--with-icon neon-button--icon-left': props.label && props.icon && props.iconPosition === 'left',\n          'neon-button--with-icon neon-button--icon-right': props.label && props.icon && props.iconPosition === 'right',\n          [`neon-button--alternate-color-${props.alternateColor}`]: props.alternateColor,\n        },\n      ];\n    });\n\n    const clickLink = () => button.value?.click();\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const clickButton = () => {\n      if (!props.disabled) {\n        emit('click');\n      }\n      button.value?.blur();\n    };\n\n    return {\n      iconName,\n      classes,\n      button,\n      attrs,\n      sanitizedAttributes,\n      clickLink,\n      clickButton,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonLink","NeonButtonSize","NeonFunctionalColor","NeonHorizontalPosition","NeonButtonStyle","NeonState","props","emit","attrs","useAttrs","button","ref","iconName","computed","classes","clickLink","_a","sanitizedAttributes","onClick","sanitized"],"mappings":"ghBAaAA,EAAeC,kBAAgB,CAC7B,KAAM,aACN,WAAY,CACV,uBAAAC,EACA,SAAAC,EACA,SAAAC,CACF,EACA,MAAO,CAIL,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAK,EAIpC,MAAO,CAAE,KAAM,OAAQ,QAAS,IAAK,EAIrC,KAAM,CAAE,KAAM,OAAgC,QAASC,EAAAA,eAAe,MAAO,EAI7E,MAAO,CAAE,KAAM,OAAqC,QAASC,EAAAA,oBAAoB,WAAY,EAK7F,QAAS,CAAE,KAAM,QAAS,QAAS,EAAM,EAIzC,eAAgB,CAAE,KAAM,OAAqC,QAAS,IAAK,EAI3E,KAAM,CAAE,KAAM,OAAQ,QAAS,IAAK,EAIpC,aAAc,CAAE,KAAM,OAAwC,QAASC,EAAAA,uBAAuB,IAAK,EAInG,YAAa,CAAE,KAAM,OAAiC,QAASC,EAAAA,gBAAgB,KAAM,EAIrF,MAAO,CAAE,KAAM,OAA2B,QAASC,EAAAA,UAAU,KAAM,EAInE,SAAU,CAAE,KAAM,QAAS,QAAS,EAAM,EAI1C,YAAa,CAAE,KAAM,QAAS,QAAS,EAAM,EAI7C,QAAS,CAAE,KAAM,QAAS,QAAS,EAAK,EAIxC,SAAU,CAAE,KAAM,QAAS,QAAS,IAAK,EAIzC,UAAW,CAAE,KAAM,QAAS,QAAS,IAAK,EAK1C,UAAW,CAAE,KAAM,QAAS,QAAS,EAAM,EAK3C,kBAAmB,CAAE,KAAM,QAAS,QAAS,IAAK,CACpD,EACA,MAAO,CAIL,OACF,EACA,MAAMC,EAAO,CAAE,KAAAC,GAAQ,CACrB,MAAMC,EAAQC,EAAAA,WAERC,EAASC,MAAwB,IAAI,EAErCC,EAAWC,EAAAA,SAAS,IAAM,CAC9B,OAAQP,EAAM,MAAO,CACnB,KAAKD,EAAU,UAAA,QACN,MAAA,UACT,KAAKA,EAAU,UAAA,QACN,MAAA,QACT,KAAKA,EAAU,UAAA,MACN,MAAA,QACT,QACE,OAAOC,EAAM,IACjB,CAAA,CACD,EAEKQ,EAAUD,EAAAA,SAAS,IAChB,CACL,gBAAgBP,EAAM,IAAI,GAC1B,CAACA,EAAM,SAAW,gBAAgBA,EAAM,KAAK,GAC7C,gBAAgBA,EAAM,WAAW,GACjC,sBAAsBA,EAAM,KAAK,GACjC,CACE,gCAAiCA,EAAM,aAAeA,EAAM,cAAgBF,EAAgB,gBAAA,KAC5F,wBAAyBE,EAAM,SAC/B,uBAAwBA,EAAM,QAC9B,wBAAyBA,EAAM,SAC/B,0BAA2B,CAACA,EAAM,QAClC,0BAA2BA,EAAM,UACjC,gDAAiD,CAACA,EAAM,OAASA,EAAM,MAAQ,CAACA,EAAM,UACtF,gDAAiDA,EAAM,OAASA,EAAM,MAAQA,EAAM,eAAiB,OACrG,iDAAkDA,EAAM,OAASA,EAAM,MAAQA,EAAM,eAAiB,QACtG,CAAC,gCAAgCA,EAAM,cAAc,EAAE,EAAGA,EAAM,cAClE,CAAA,CAEH,EAEKS,EAAY,IAAM,OAAA,OAAAC,EAAAN,EAAO,QAAP,YAAAM,EAAc,SAEhCC,EAAsBJ,EAAAA,SAAS,IAAM,CAEzC,KAAM,CAAE,QAAAK,EAAS,GAAGC,CAAA,EAAcX,EAC3B,OAAAW,CAAA,CACR,EASM,MAAA,CACL,SAAAP,EACA,QAAAE,EACA,OAAAJ,EACA,MAAAF,EACA,oBAAAS,EACA,UAAAF,EACA,YAdkB,IAAM,OACnBT,EAAM,UACTC,EAAK,OAAO,GAEdS,EAAAN,EAAO,QAAP,MAAAM,EAAc,MAAK,CAUnB,CAEJ,CACF,CAAC"}

package/dist/components/user-input/button/NeonButton.es.js

@@ -7,7 +7,7 @@ import h from "../../presentation/icon/NeonIcon.vue.es.js";
 import k from "../../navigation/link/NeonLink.vue.es.js";
 import N from "../../presentation/expansion-indicator/NeonExpansionIndicator.vue.es.js";
 import { NeonState as e } from "../../../common/enums/NeonState.es.js";
-const A = b({
+const I = b({
   name: "NeonButton",
   components: {
     NeonExpansionIndicator: N,
@@ -126,7 +126,7 @@ const A = b({
       var n;
       return (n = o.value) == null ? void 0 : n.click();
     }, f = l(() => {
-      const { _onClick: n, ...s } = i;
+      const { onClick: n, ...s } = i;
       return s;
     });
     return {
@@ -138,12 +138,12 @@ const A = b({
       clickLink: d,
       clickButton: () => {
         var n;
-        u("click"), (n = o.value) == null || n.blur();
+        t.disabled || u("click"), (n = o.value) == null || n.blur();
       }
     };
   }
 });
 export {
-  A as default
+  I as default
 };
 //# sourceMappingURL=NeonButton.es.js.map

package/dist/components/user-input/button/NeonButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"NeonButton.es.js","sources":["../../../../src/components/user-input/button/NeonButton.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonButtonSize } from '@/common/enums/NeonButtonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';\nimport { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport { NeonState } from '@/common/enums/NeonState';\n\n/**\n * A button component. Renders an HTML button or, if an href is provided, renders using NeonLink in the style of a button. NeonButton supports all events and attributes of HTML buttons, e.g, @click.\n */\nexport default defineComponent({\n  name: 'NeonButton',\n  components: {\n    NeonExpansionIndicator,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * Optional href for rendering a button as a link\n     */\n    href: { type: String, default: null },\n    /**\n     * The text to display on a button\n     */\n    label: { type: String, default: null },\n    /**\n     * The button size\n     */\n    size: { type: String as () => NeonButtonSize, default: NeonButtonSize.Medium },\n    /**\n     * The button color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background.\n     * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported)\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Optional icon to display\n     */\n    icon: { type: String, default: null },\n    /**\n     * Position of the icon if combined with text\n     */\n    iconPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Left },\n    /**\n     * The style of button\n     */\n    buttonStyle: { type: String as () => NeonButtonStyle, default: NeonButtonStyle.Solid },\n    /**\n     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with icons) to reflect the state.\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * Whether the button is disabled\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * For text buttons, do not display the background. This is useful for icon buttons in headers.\n     */\n    transparent: { type: Boolean, default: false },\n    /**\n     * Whether to display a button outline when the button has focus\n     */\n    outline: { type: Boolean, default: true },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * Make a button extend to the full width of the parent container.\n     */\n    fullWidth: { type: Boolean, default: null },\n    /**\n     * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons)\n     * @ignore\n     */\n    indicator: { type: Boolean, default: false },\n    /**\n     * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as <em>open</em> or <em>closed</em>.\n     * @ignore\n     */\n    indicatorExpanded: { type: Boolean, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on the button or link.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const button = ref<HTMLElement | null>(null);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return 'check';\n        case NeonState.Error:\n          return 'times';\n        default:\n          return props.icon;\n      }\n    });\n\n    const classes = computed(() => {\n      return [\n        `neon-button--${props.size}`,\n        !props.inverse && `neon-button--${props.color}`,\n        `neon-button--${props.buttonStyle}`,\n        `neon-button--state-${props.state}`,\n        {\n          'neon-button--text-transparent': props.transparent && props.buttonStyle === NeonButtonStyle.Text,\n          'neon-button--disabled': props.disabled,\n          'neon-button--inverse': props.inverse,\n          'neon-button--circular': props.circular,\n          'neon-button--no-outline': !props.outline,\n          'neon-button--full-width': props.fullWidth,\n          'neon-button--with-icon neon-button--icon-only': !props.label && props.icon && !props.indicator,\n          'neon-button--with-icon neon-button--icon-left': props.label && props.icon && props.iconPosition === 'left',\n          'neon-button--with-icon neon-button--icon-right': props.label && props.icon && props.iconPosition === 'right',\n          [`neon-button--alternate-color-${props.alternateColor}`]: props.alternateColor,\n        },\n      ];\n    });\n\n    const clickLink = () => button.value?.click();\n\n    const sanitizedAttributes = computed(() => {\n      const { _onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const clickButton = () => {\n      emit('click');\n      button.value?.blur();\n    };\n\n    return {\n      iconName,\n      classes,\n      button,\n      attrs,\n      sanitizedAttributes,\n      clickLink,\n      clickButton,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonLink","NeonButtonSize","NeonFunctionalColor","NeonHorizontalPosition","NeonButtonStyle","NeonState","props","emit","attrs","useAttrs","button","ref","iconName","computed","classes","clickLink","_a","sanitizedAttributes","_onClick","sanitized"],"mappings":"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"}
+{"version":3,"file":"NeonButton.es.js","sources":["../../../../src/components/user-input/button/NeonButton.ts?vue&type=script&src=true&lang.ts"],"sourcesContent":["import { computed, defineComponent, ref, useAttrs } from 'vue';\nimport { NeonButtonSize } from '@/common/enums/NeonButtonSize';\nimport { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';\nimport { NeonButtonStyle } from '@/common/enums/NeonButtonStyle';\nimport { NeonHorizontalPosition } from '@/common/enums/NeonHorizontalPosition';\nimport NeonIcon from '@/components/presentation/icon/NeonIcon.vue';\nimport NeonLink from '@/components/navigation/link/NeonLink.vue';\nimport NeonExpansionIndicator from '@/components/presentation/expansion-indicator/NeonExpansionIndicator.vue';\nimport { NeonState } from '@/common/enums/NeonState';\n\n/**\n * A button component. Renders an HTML button or, if an href is provided, renders using NeonLink in the style of a button. NeonButton supports all events and attributes of HTML buttons, e.g, @click.\n */\nexport default defineComponent({\n  name: 'NeonButton',\n  components: {\n    NeonExpansionIndicator,\n    NeonIcon,\n    NeonLink,\n  },\n  props: {\n    /**\n     * Optional href for rendering a button as a link\n     */\n    href: { type: String, default: null },\n    /**\n     * The text to display on a button\n     */\n    label: { type: String, default: null },\n    /**\n     * The button size\n     */\n    size: { type: String as () => NeonButtonSize, default: NeonButtonSize.Medium },\n    /**\n     * The button color\n     */\n    color: { type: String as () => NeonFunctionalColor, default: NeonFunctionalColor.LowContrast },\n    /**\n     * Display the button as high-contrast with inverted colors. This is useful for placing a button on a colored background.\n     * NOTE: Supports Solid & Outline button styles only (gradient & text buttons are not supported)\n     */\n    inverse: { type: Boolean, default: false },\n    /**\n     * Solid buttons ONLY. Alternate color for creating a gradient buttons. NOTE: can also be the same color as 'color'.\n     */\n    alternateColor: { type: String as () => NeonFunctionalColor, default: null },\n    /**\n     * Optional icon to display\n     */\n    icon: { type: String, default: null },\n    /**\n     * Position of the icon if combined with text\n     */\n    iconPosition: { type: String as () => NeonHorizontalPosition, default: NeonHorizontalPosition.Left },\n    /**\n     * The style of button\n     */\n    buttonStyle: { type: String as () => NeonButtonStyle, default: NeonButtonStyle.Solid },\n    /**\n     * Provide button states of <em>ready, loading, success or error</em> which change the display of the button (with icons) to reflect the state.\n     */\n    state: { type: String as () => NeonState, default: NeonState.Ready },\n    /**\n     * Whether the button is disabled\n     */\n    disabled: { type: Boolean, default: false },\n    /**\n     * For text buttons, do not display the background. This is useful for icon buttons in headers.\n     */\n    transparent: { type: Boolean, default: false },\n    /**\n     * Whether to display a button outline when the button has focus\n     */\n    outline: { type: Boolean, default: true },\n    /**\n     * Make the button circular. NOTE: This is only for icon only buttons.\n     */\n    circular: { type: Boolean, default: null },\n    /**\n     * Make a button extend to the full width of the parent container.\n     */\n    fullWidth: { type: Boolean, default: null },\n    /**\n     * INTERNAL USE ONLY: display a NeonExpansionIndicator on the button (used for dropdown buttons)\n     * @ignore\n     */\n    indicator: { type: Boolean, default: false },\n    /**\n     * INTERNAL USE ONLY: display the NeonExpansionIndicator on the button as <em>open</em> or <em>closed</em>.\n     * @ignore\n     */\n    indicatorExpanded: { type: Boolean, default: null },\n  },\n  emits: [\n    /**\n     * Emitted when the user clicks on the button or link.\n     */\n    'click',\n  ],\n  setup(props, { emit }) {\n    const attrs = useAttrs();\n\n    const button = ref<HTMLElement | null>(null);\n\n    const iconName = computed(() => {\n      switch (props.state) {\n        case NeonState.Loading:\n          return 'loading';\n        case NeonState.Success:\n          return 'check';\n        case NeonState.Error:\n          return 'times';\n        default:\n          return props.icon;\n      }\n    });\n\n    const classes = computed(() => {\n      return [\n        `neon-button--${props.size}`,\n        !props.inverse && `neon-button--${props.color}`,\n        `neon-button--${props.buttonStyle}`,\n        `neon-button--state-${props.state}`,\n        {\n          'neon-button--text-transparent': props.transparent && props.buttonStyle === NeonButtonStyle.Text,\n          'neon-button--disabled': props.disabled,\n          'neon-button--inverse': props.inverse,\n          'neon-button--circular': props.circular,\n          'neon-button--no-outline': !props.outline,\n          'neon-button--full-width': props.fullWidth,\n          'neon-button--with-icon neon-button--icon-only': !props.label && props.icon && !props.indicator,\n          'neon-button--with-icon neon-button--icon-left': props.label && props.icon && props.iconPosition === 'left',\n          'neon-button--with-icon neon-button--icon-right': props.label && props.icon && props.iconPosition === 'right',\n          [`neon-button--alternate-color-${props.alternateColor}`]: props.alternateColor,\n        },\n      ];\n    });\n\n    const clickLink = () => button.value?.click();\n\n    const sanitizedAttributes = computed(() => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { onClick, ...sanitized } = attrs;\n      return sanitized;\n    });\n\n    const clickButton = () => {\n      if (!props.disabled) {\n        emit('click');\n      }\n      button.value?.blur();\n    };\n\n    return {\n      iconName,\n      classes,\n      button,\n      attrs,\n      sanitizedAttributes,\n      clickLink,\n      clickButton,\n    };\n  },\n});\n"],"names":["_sfc_main","defineComponent","NeonExpansionIndicator","NeonIcon","NeonLink","NeonButtonSize","NeonFunctionalColor","NeonHorizontalPosition","NeonButtonStyle","NeonState","props","emit","attrs","useAttrs","button","ref","iconName","computed","classes","clickLink","_a","sanitizedAttributes","onClick","sanitized"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aotearoan/neon",
   "description": "Neon is a lightweight design library of Vue 3 components with minimal dependencies.",
-  "version": "18.2.6",
+  "version": "18.2.7",
   "main": "./dist/neon.cjs.js",
   "module": "./dist/neon.es.js",
   "types": "./dist/src/neon.d.ts",

package/src/sass/components/_button.scss

@@ -173,6 +173,10 @@
   }
 }
 
+@mixin neon-full-width-button {
+  @include neon-full-width-button;
+}
+
 @mixin button {
   .neon-button {
     margin-left: 0;
@@ -384,5 +388,14 @@
     justify-content: flex-end;
     align-items: center;
     gap: var(--neon-space-16);
+
+    @include responsive.responsive(mobile-large) {
+      flex-direction: column-reverse;
+      gap: calc(3 * var(--neon-base-space));
+
+      & > .neon-button {
+        @include neon-full-width-button;
+      }
+    }
   }
 }