Skip to content

Commit

Permalink
Svelte V2
Browse files Browse the repository at this point in the history
  • Loading branch information
@ansarizafar
ansarizafar committed Apr 15, 2018
1 parent f8541c1 commit f1c3168
Show file tree
Hide file tree
Showing 21 changed files with 1,343 additions and 692 deletions.
11 changes: 6 additions & 5 deletions App.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<:Head>
<svelte:head>
<title>Tailwindcss</title>
</:Head>
</svelte:head>

<div class="container py-4 px-4 lg:px-0 md:px-0 mx-auto">
<div class="ui center menu">
Expand Down Expand Up @@ -125,7 +125,7 @@ <h1 class="text-2xl font-bold">List</h1>
<Switch type='radio' color="red" name='gender' value='Male' on:change='ongender(event)' checked='true'></Switch>
<Switch type='radio' color="yellow" name='gender' value='Female' on:change='ongender(event)'></Switch>

<Choose width='w-64' selected="2" name="city" list='{{cities}}'>
<Choose width='w-64' selected="2" name="city" list='{cities}'>

</Choose>
</div>
Expand All @@ -147,13 +147,13 @@ <h1 class="text-2xl font-bold">List</h1>
</div>

<div class="field w-64">
<Datepicker color='green' format='full' class="w-64"></Datepicker>
<Datepicker name="birthDate" bind:selectedDate color='green' format='full' class="w-64"></Datepicker>
</div>
<button class="block blue rounded small button mt-4 mb-6" type="submit" on:click='submit(event)'>Submit</button>
</form>


<Dropdown items='{{cities}}'></Dropdown>
<Dropdown items='{cities}'></Dropdown>


<table class="indigo">
Expand Down Expand Up @@ -207,6 +207,7 @@ <h1 class="text-2xl font-bold">List</h1>
data() {
return {
name: '',
//selectedDate: new Date(),
cities: [{
value: 1,
label: 'Karachi'
Expand Down
22 changes: 11 additions & 11 deletions components/Alert.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{{#if isVisible}}
<div transition:fade='{delay: 0, duration: 100}' class="relative bg-{{color}}-lightest border-l-4 border-{{color}} text-{{color}}-dark p-4"
{#if isVisible}
<div transition:fade='{delay: 0, duration: 100}' class="relative bg-{color}-lightest border-l-4 border-{color} text-{color}-dark p-4"
role="alert">
<p class="font-bold">{{title ? title : '' }}</p>
<p>{{message}}</p>
<p class="font-bold">{title ? title : '' }</p>
<p>{message}</p>

<span class="absolute pin-t pin-r px-4 py-3">
<svg on:click='hide()' class="fill-current h-6 w-6 text-{{color}}" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
Expand All @@ -13,12 +13,12 @@
</span>

</div>
{{/if}}
{/if}
<script>
import {
fade
} from 'svelte-transitions';
let timeOut = null

export default {
transitions: {
fade
Expand All @@ -27,8 +27,8 @@
//console.log(this.options.data.type)
},
ondestroy() {
if (timeOut) {
clearTimeout(timeOut);
if (this.timeOut) {
clearTimeout(this.timeOut);
}
},
data() {
Expand Down Expand Up @@ -58,15 +58,15 @@
isVisible: true
})
if (this.options.data.timeout) {
timeOut = setTimeout(() => this.hide(), this.options.data.timeout);
this.timeOut = setTimeout(() => this.hide(), this.options.data.timeout);
}
},
hide() {
this.set({
isVisible: false
})
if (timeOut) {
clearTimeout(timeOut);
if (this.timeOut) {
clearTimeout(this.timeOut);
}
}
}
Expand Down
10 changes: 5 additions & 5 deletions components/Choose.html
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div class="relative {{width}}">
<div class="relative {width}">
<select class="block appearance-none w-full h-full bg-white border border-grey-light text-grey-darker py-3 px-4 pr-8 rounded"
name='{{name}}' on:change='fire("change",e)'>
{{#each list as item}}
<option value='{{item.value}}' selected='{{item.value === selected ? true: false}}'>{{item.label}}</option>
{{/each}}
name='{name}' on:change='fire("change",e)'>
{#each list as item}
<option value='{item.value}' selected='{item.value === selected ? true: false}'>{item.label}</option>
{/each}


</select>
Expand Down
136 changes: 84 additions & 52 deletions components/Datepicker.html
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,52 @@
<div tabindex="0" class="relative inline-block cursor- w-full shadow">

<div tabindex="0" class="relative inline-block cursor- w-full shadow" >
<button on:click='toggleOpen(event)' on:blur='close(event)' class="appearance-none w-full pt-2 pb-2 pl-4 pr-4 rounded flex items-center justify-between bg-white border border-grey-light font-normal hover:bg-transparent hover:border-{{
color}}">
<span class="pr-2 text-grey-dark">
<div tabindex="0" class="pt-2 pb-2 pr-4 border rounded flex items-center justify-between active:border-{
color} hover:border-{
color}">
<input readonly on:click='toggleOpen(event)' on:blur='close(event)' class="pt-0 pb-0 shadow-none cursor-default appearance-none w-full bg-white border-0 font-normal active:border-0 hover:border-0" value={selectedDate ? (format === 'full' ? selectedDate.toDateString() : selectedDate.toLocaleDateString()) : placeholder}>
<!--
<span class="pr-2 text-grey-dark">
{{selectedDate ? (format === 'full' ? selectedDate.toDateString() : selectedDate.toLocaleDateString()) : placeholder}}
</span>

<svg class="fill-current h-4 w-4" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
</svg>
</button>
{{#if open }}
</input>
-->
<svg on:click='toggleOpen(event)' on:blur='close(event)' class="fill-current h-4 w-4" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
</svg>
</div>

{#if open }
<div transition:fade='{delay: 0, duration: 100}'>
<div class="absolute border border-grey-light bg-white rounded z-10 shadow w-64 pb-2">

<div class="w-full text-center p-2 flex justify-between">

<svg id="pre" on:click="prev(event)" on:blur='close(event)' class="fill-current h-6 w-6 bg-transparent hover:bg-{{color}} pr-1 pl-1 pt-0 pb-0 rounded-full hover:text-white"
<svg id="pre" on:click="prev(event)" on:blur='close(event)' class="fill-current h-6 w-6 bg-transparent hover:bg-{color} pr-1 pl-1 pt-0 pb-0 rounded-full hover:text-white"
viewBox="0 0 12 32">
<path d="M11.196 10c0 0.143-0.071 0.304-0.179 0.411l-7.018 7.018 7.018 7.018c0.107 0.107 0.179 0.268 0.179 0.411s-0.071 0.304-0.179 0.411l-0.893 0.893c-0.107 0.107-0.268 0.179-0.411 0.179s-0.304-0.071-0.411-0.179l-8.321-8.321c-0.107-0.107-0.179-0.268-0.179-0.411s0.071-0.304 0.179-0.411l8.321-8.321c0.107-0.107 0.268-0.179 0.411-0.179s0.304 0.071 0.411 0.179l0.893 0.893c0.107 0.107 0.179 0.25 0.179 0.411z"></path>
</svg>
{{#if monthCard}} {{selectedYear}} {{else}}
<button id="changeMY" on:click="changeMY(event)" class="pt-1 small uppercase bg-transparent hover:bg-{{color}} hover:text-white rounded-full">{{selectedMonth}} {{selectedYear}} </button>
{{/if}}
<svg id="next" on:click="next(event)" on:blur='close(event)' class="fill-current h-6 w-6 bg-transparent hover:bg-{{color}} pr-1 pl-1 pt-0 pb-0 rounded-full hover:text-white"
{#if monthCard} {selectedYear} {:else}
<button id="changeMY" on:click="changeMY(event)" class="pt-1 small uppercase bg-transparent hover:bg-{color} hover:text-white rounded-full">{selectedMonth} {selectedYear} </button>
{/if}
<svg id="next" on:click="next(event)" on:blur='close(event)' class="fill-current h-6 w-6 bg-transparent hover:bg-{color} pr-1 pl-1 pt-0 pb-0 rounded-full hover:text-white"
viewBox="0 0 11 32">
<path d="M10.625 17.429c0 0.143-0.071 0.304-0.179 0.411l-8.321 8.321c-0.107 0.107-0.268 0.179-0.411 0.179s-0.304-0.071-0.411-0.179l-0.893-0.893c-0.107-0.107-0.179-0.25-0.179-0.411 0-0.143 0.071-0.304 0.179-0.411l7.018-7.018-7.018-7.018c-0.107-0.107-0.179-0.268-0.179-0.411s0.071-0.304 0.179-0.411l0.893-0.893c0.107-0.107 0.268-0.179 0.411-0.179s0.304 0.071 0.411 0.179l8.321 8.321c0.107 0.107 0.179 0.268 0.179 0.411z"></path>
</svg>

</div>

{{#if monthCard}}
{#if monthCard}
<div class="flex justify-center flex-wrap">
{{#each months as month}}
<button on:click="onSelect(event)" id="{{month}}" class="outline w-12 pt-1 pb-1 pr-8 pl-8 bg-white rounded-full border-grey-light hover:border-{{color}} hover:bg-{{color}} {{selectedDay === day ? 'bg-green text-white' : ''}} hover:text-white text-sm flex justify-center">{{month}}</button>
{{/each}}
{#each months as month}
<button on:click="onSelect(event)" id="{month}" class="outline w-12 pt-1 pb-1 pr-8 pl-8 bg-white rounded-full border-grey-light hover:border-{color} hover:bg-{color} {selectedDay === day ? 'bg-green text-white' : ''} hover:text-white text-sm flex justify-center">{month}</button>
{/each}
</div>
{{else}}
{:else}
<div class="flex justify-around pt-1 px-2 py-2 text-grey text-sm">
<span>Su</span>
<span>Mo</span>
Expand All @@ -47,56 +57,75 @@
<span>Sa</span>
</div>
<div class="flex justify-center flex-wrap">
{{#each days as day}} {{#if day != ''}}
<button on:click="onSelect(event)" on:keypress="onSelect(event)" id="{{day}}" class="outline w-8 pt-1 pb-1 pr-4 pl-4 bg-white rounded-full border-grey-light hover:border-{{color}} hover:bg-{{color}} {{selectedDay === day ? 'bg-green text-white' : ''}} hover:text-white text-sm flex justify-center">{{day}}</button>
{{else}}
{#each days as day} {#if day != ''}
<button on:click="onSelect(event)" on:keypress="onSelect(event)" id="{day}" class="outline w-8 pt-1 pb-1 pr-4 pl-4 bg-white rounded-full border-grey-light hover:border-{color} hover:bg-{color} {selectedDay === day ? `bg-${color} text-white` : ''} hover:text-white text-sm flex justify-center">{day}</button>
{:else}
<div class=" w-8 pt-1 pb-1 pr-4 pl-4"></div>
{{/if}} {{/each}}
{/if} {/each}
</div>

{{/if}}
{/if}

</div>
</div>
{{/if}}
{/if}
</div>

<script>
let days = [];
const currentDate = new Date();
const nextYear = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1)
//const current = new Date(now.getFullYear(), now.getMonth()+1, 1);

import {
import {
fade
} from 'svelte-transitions';
export default {
transitions: {
fade
},
data() {
data() {
return {
days: [],
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
selectedDate: new Date(),
selectedDate: null,
selectedDay: 1,
placeholder: 'Select a date',
color: 'blue',
color: 'grey',
open: false,
monthCard: false,
format: 'full' // full or short
}
},
computed: {
selectedMonth: selectedDate => selectedDate.toLocaleString('en-us', {
month: 'long'
}),
selectedMonth: selectedDate => {
if (selectedDate) {
return selectedDate.toLocaleString('en-us', {
month: 'long'
})
} else {
const d = new Date()
return d.toLocaleString('en-us', {
month: 'long'
})
}
},
// selectedMonthNo: selectedDate => selectedDate.getMonth(),
selectedYear: selectedDate => selectedDate.getFullYear()
selectedYear: selectedDate => {
if (selectedDate) {
return selectedDate.getFullYear()
} else {
const d = new Date()
return d.getFullYear()
}
}
},
oncreate() {
this.set({color: 'red'})
this.observe('selectedDate', date => {
const daysInMonth = (new Date(date.getFullYear(), date.getMonth() + 1, 0)).getDate()
if(!date) {
date = new Date()
}
const daysInMonth = (new Date(date.getFullYear(), date.getMonth() + 1, 0)).getDate()
this.set({
selectedDay: date.getDate()
})
Expand Down Expand Up @@ -133,33 +162,35 @@
event.preventDefault();
if (this.get('monthCard')) {
this.set({
selectedDate: new Date(this.get('selectedYear') + 1, this.get('selectedDate').getMonth(), this.get('selectedDay'))
})
selectedDate: new Date(this.get('selectedYear') + 1, this.get('selectedDate').getMonth(), this.get(
'selectedDay'))
})

} else {
let monthDate = null
let selDate = this.get('selectedDate')
let monthDate = null
let selDate = this.get('selectedDate') || new Date()

monthDate = new Date(selDate.getFullYear(), selDate.getMonth() + 1, 1)
this.set({
selectedDate: new Date(monthDate.getFullYear(), monthDate.getMonth(), this.get('selectedDay'))
})
monthDate = new Date(selDate.getFullYear(), selDate.getMonth() + 1, 1)
this.set({
selectedDate: new Date(monthDate.getFullYear(), monthDate.getMonth(), this.get('selectedDay'))
})
}
},
prev() {
event.preventDefault();
if (this.get('monthCard')) {
this.set({
selectedDate: new Date(this.get('selectedYear') - 1, this.get('selectedDate').getMonth(), this.get('selectedDay'))
})
selectedDate: new Date(this.get('selectedYear') - 1, this.get('selectedDate').getMonth(), this.get(
'selectedDay'))
})

} else {
let monthDate = null
let selDate = this.get('selectedDate')
monthDate = new Date(selDate.getFullYear(), selDate.getMonth() - 1, 1)
this.set({
selectedDate: new Date(monthDate.getFullYear(), monthDate.getMonth(), this.get('selectedDay'))
})
let monthDate = null
let selDate = this.get('selectedDate')
monthDate = new Date(selDate.getFullYear(), selDate.getMonth() - 1, 1)
this.set({
selectedDate: new Date(monthDate.getFullYear(), monthDate.getMonth(), this.get('selectedDay'))
})
}
},
toggleOpen() {
Expand All @@ -173,7 +204,7 @@
},
close(event) {
event.preventDefault();
if (event.relatedTarget === null || event.relatedTarget.id != 'pre' && event.relatedTarget.id != 'next' &&
if (event.relatedTarget === null || event.relatedTarget.id != 'pre' && event.relatedTarget.id != 'next' &&
event.relatedTarget.id != 'changeMY') {

this.set({
Expand Down Expand Up @@ -205,11 +236,12 @@
})

this.set({
selectedDate: new Date(this.get('selectedYear'), this.get('selectedDate').getMonth(), this.get(
selectedDate: new Date(this.get('selectedYear'), this.get('months').indexOf(this.get('selectedMonth').substring(0,3)), this.get(
'selectedDay'))
})
this.fire('selected', this.get('selectedDate'))

}
this.fire('selected', this.get('selectedDate'))
}
},

Expand Down
Loading

0 comments on commit f1c3168

Please sign in to comment.