<template>
    <div class="bkh">


        <div class="head1"><span style="cursor:pointer;" title="open for copy link to view component" onclick="window.open('//yuda-lyu.github.io/w-component-vue/examples/app.html?cmp='+this.innerText,'_blank')">w-alert</span></div>


        <div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'default'"
                ></demolink>

                <w-button-chip :text="'success'" :borderRadius="4" @click="$alert(WAlert.textSuccess)"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'type infor'"
                ></demolink>

                <w-button-chip :text="'infor'" :borderRadius="4" @click="$alert(WAlert.textInfor,{type:'infor'})"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'type warning'"
                ></demolink>

                <w-button-chip :text="'warning'" :borderRadius="4" @click="$alert(WAlert.textWarning,{type:'warning'})"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'type error'"
                ></demolink>

                <w-button-chip :text="'error'" :borderRadius="4" @click="$alert(WAlert.textError,{type:'error'})"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'position'"
                ></demolink>

                <w-button-chip style="margin-right:10px;" :text="'bottom-right'" :borderRadius="4" @click="$alert(WAlert.text,{
                    position:'bottom-right'
                })"></w-button-chip>

                <w-button-chip style="margin-right:10px;" :text="'top-left'" :borderRadius="4" @click="$alert(WAlert.text,{
                    position:'top-left'
                })"></w-button-chip>

                <w-button-chip style="margin-right:10px;" :text="'bottom-left'" :borderRadius="4" @click="$alert(WAlert.text,{
                    position:'bottom-left'
                })"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'time (6s)'"
                ></demolink>

                <w-button-chip :text="'show'" :borderRadius="4" @click="$alert(WAlert.text,{
                    time:6000
                })"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'textColor'"
                ></demolink>

                <w-button-chip :text="'show'" :borderRadius="4" @click="$alert(WAlert.text,{
                    textColor:'#f52'
                })"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'backgroundColor'"
                ></demolink>

                <w-button-chip :text="'show'" :borderRadius="4" @click="$alert(WAlert.text,{
                    backgroundColor:'linear-gradient(135deg,rgba(155,255,120,0.4),#fff)'
                })"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'borderWidth'"
                ></demolink>

                <w-button-chip :text="'show'" :borderRadius="4" @click="$alert(WAlert.text,{
                    borderWidth:15
                })"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'borderColor'"
                ></demolink>

                <w-button-chip :text="'show'" :borderRadius="4" @click="$alert(WAlert.text,{
                    borderColor:'#9f5'
                })"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'borderRadius'"
                ></demolink>

                <w-button-chip :text="'show'" :borderRadius="4" @click="$alert(WAlert.text,{
                    borderRadius:0
                })"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'shadowStyle'"
                ></demolink>

                <w-button-chip :text="'show'" :borderRadius="4" @click="$alert(WAlert.text,{
                    shadowStyle:'0px 3px 1px -2px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 1px 5px 0px rgba(0, 0, 0, 0.07)'
                })"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'icon'"
                ></demolink>

                <w-button-chip :text="'show'" :borderRadius="4" @click="$alert(WAlert.text,{
                    icon:WAlert.icon
                })"></w-button-chip>

            </div>


            <div class="bk">
                <demolink
                    :kbname="'w-alert'"
                    :casename="'recive closed event by promise'"
                ></demolink>

                <w-button-chip :text="'show'" :borderRadius="4" @click="receiveCloseEvent"></w-button-chip>

            </div>


        </div>


    </div>
</template>

<script>
import demolink from './components/demolink.vue'
import WAlert from './components/WAlert.mjs'
import WButtonChip from './components/WButtonChip.vue'


export default {
    components: {
        demolink,
        WButtonChip,
    },
    props: {
    },
    data: function() {
        return {
            'WAlert': {
                'number': 0,
                'text': 'Test message',
                'textSuccess': 'Success message',
                'textWarning': 'Warging message',
                'textError': 'Error message',
                'textInfor': 'Infor message',
                'textCallAtEnd': 'Waiting to call function',
                'icon': '<svg style="width:24px; height:24px;" enable-background="new 0 0 512.006 512.006" viewBox="0 0 512.006 512.006" xmlns="http://www.w3.org/2000/svg"><g><path d="m281.491 149.016c-16.652 13.421-40.32 13.421-56.972 0-26.474-21.336-47.818-49.649-48.514-83.94 0-15.467 9.153-28.792 22.341-34.891-8.597-6.398-19.274-10.181-30.841-10.181-28.443 0-51.5 23.022-51.5 51.422 1.003 49.407 34.05 89.537 73.202 118.72 17.634 13.144 41.962 13.144 59.596 0 25.755-19.197 48.865-43.133 61.953-71.33-8.122 11.225-18.245 21.319-29.265 30.2z" fill="#c6e1f2"/><g fill="#ff5cf4"><g><path d="m336.005 212.284c-.002-.133 0 .134 0 0z"/><path d="m458.005 158.003c-12.874 0-24.711 4.543-34 12.116-9.289-7.573-21.126-12.116-34-12.116-29.776 0-54 24.351-54 54.281.699 34.774 20.17 67.932 56.3 95.127 9.332 7.023 20.516 10.536 31.7 10.535 11.184 0 22.368-3.512 31.7-10.536 36.13-27.195 55.601-60.352 56.3-95.126 0-29.93-24.224-54.281-54-54.281zm-26.355 117.449c-4.501 3.388-10.789 3.388-15.291 0-18.053-13.588-39.68-35.594-40.354-63.34.091-7.796 6.336-14.108 13.999-14.108 7.72 0 14 6.36 14 14.177 0 11.046 8.954 20 20 20s20-8.954 20-20c0-7.817 6.28-14.177 14-14.177 7.663 0 13.908 6.313 13.999 14.108-.673 27.746-22.3 49.752-40.353 63.34z"/></g><path d="m512.005 212.284c0 .134.003-.133 0 0z"/></g></g><g fill="#0023c4"><g><path d="m342.005 71.426c0 .135.003-.136 0 0z"/><g><path d="m96.005 71.426c-.003-.136 0 .135 0 0z"/><path d="m270.505.003c-20.208 0-38.484 8.397-51.5 21.878-13.016-13.48-31.292-21.878-51.5-21.878-39.425 0-71.5 32.04-71.5 71.422.995 49.016 29.093 95.879 81.249 134.755 12.292 9.161 27.021 13.742 41.751 13.742s29.459-4.581 41.751-13.742c52.156-38.876 80.254-85.739 81.249-134.755 0-39.382-32.074-71.422-71.5-71.422zm-33.654 174.107c-10.507 7.832-25.185 7.832-35.691 0-29.166-21.74-64.119-57.221-65.154-102.871.102-17.241 14.193-31.235 31.5-31.235 17.369 0 31.5 14.026 31.5 31.266 0 11.046 8.954 20 20 20s20-8.954 20-20c0-17.24 14.131-31.266 31.5-31.266 17.307 0 31.398 13.995 31.5 31.235-1.036 45.65-35.989 81.131-65.155 102.871z"/></g></g><path d="m505.795 382.441c-13.04-25.049-42.742-35.969-70.372-25.483-18.6 7.059-41.761 15.841-68.606 23.085 2.523-11.551 1.392-23.815-3.416-35.467-6.897-16.716-21.07-29.153-38.886-34.123-9.11-2.541-18.996-3.112-29.384-1.698-68.547 9.325-109.359-13.768-145.365-34.141-24.185-13.684-47.029-26.61-73.761-26.61-35 0-61.974 10.913-61.974 10.913-10.542 3.299-16.413 14.52-13.113 25.061 3.299 10.542 14.52 16.411 25.061 13.113 0 0 22.026-9.087 50.026-9.087 16.201 0 32.909 9.454 54.063 21.423 31.658 17.913 73.217 41.434 134.983 41.431 11.143 0 22.954-.767 35.472-2.469 4.888-.666 9.469-.459 13.246.593 4.216 1.176 9.834 4.013 12.655 10.849 2.188 5.302 2.297 10.262.325 14.744-2.419 5.5-7.933 10.056-15.523 12.832-11.284 4.126-26.242 6.575-43.286 6.588-12.936.009-38.527-2.044-54.853-6.334-10.686-2.809-21.619 3.577-24.426 14.26s3.578 21.619 14.26 24.426c30.083 7.657 65.303 7.646 65.583 7.643 77.44-.304 139.777-23.947 181.111-39.634 6.95-2.639 16.336-1.823 20.515 6.202l.183.351c3.752 7.208.99 16.179-6.158 19.998-47.298 25.268-107.339 51.098-194.038 51.098-76.199 0-146.387-29.405-191.849-54.072-19.994-10.849-36.906-13.928-48.264-13.928-10 0-15.147 1.693-15.147 1.693-8.547 2.274-14.853 10.044-14.853 19.307 0 11.046 8.954 20 20 20 1.783 0 6.314-.867 9-.857 5.584.022 16.185 1.345 30.187 8.943 49.533 26.876 126.335 58.914 210.925 58.914 95.524 0 161.22-28.216 212.886-55.817 26.396-14.103 36.62-47.187 22.793-73.747z"/></g></svg>',
            },
            'actions': [
                {
                    'mode': 'eleclick',
                    'selector': 'button'
                }
            ],
        }
    },
    mounted: function() {
        try {
            this.$alert = WAlert
        }
        catch (err) {}
    },
    methods: {
        receiveCloseEvent: function() {
            let vo = this
            vo.WAlert.number += 1
            let n = vo.WAlert.number
            vo.$alert(vo.WAlert.textCallAtEnd + ' [' + n + ']')
                .then(function() {
                    vo.$alert('Call function ' + '[' + n + ']' + ' at the end')
                })
        },
    },
}
</script>

<style scoped>
</style>
