Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(vue): streamline usage examples with script setup syntax #3895

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
Open

docs(vue): streamline usage examples with script setup syntax #3895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5458e5d
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
2ee6800
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
0d44a76
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
5c8f91f
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
7c585b4
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
a8c3a2c
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
7f3e49d
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
9030a64
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
5cf4e0b
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
1721ecd
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
c1c9dee
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
3edfdab
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
c5ef654
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
8773c5f
docs(vue): streamline usage example with script setup syntax
treighmawaka Dec 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions static/usage/v8/input/basic/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,7 @@
</ion-list>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonInput, IonItem, IonList } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonInput, IonItem, IonList },
});
</script>
```
9 changes: 2 additions & 7 deletions static/usage/v8/input/clear/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,12 +34,7 @@
</ion-list>
</template>

<script lang="ts">
import { IonInput, IonItem, IonList } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonInput, IonItem, IonList },
});
<script setup lang="ts">
import { IonInput, IonItem, IonList } from '@ionic/vue';
</script>
```
7 changes: 1 addition & 6 deletions static/usage/v8/input/fill/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,7 @@
<ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonInput } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonInput },
});
</script>
```
45 changes: 19 additions & 26 deletions static/usage/v8/input/filtering/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,35 +12,28 @@
</ion-list>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonInput, IonItem, IonList } from '@ionic/vue';
import { defineComponent, ref } from 'vue';

const ionInputEl = ref();
const inputModel = ref('');

const onInput = (ev) => {
const value = ev.target!.value;

export default defineComponent({
components: { IonInput, IonItem, IonList },
setup() {
const ionInputEl = ref();
const inputModel = ref('');
const onInput = (ev) => {
const value = ev.target!.value;
// Removes non alphanumeric characters
const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');

// Removes non alphanumeric characters
const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
/**
* Update both the state variable and
* the component to keep them in sync.
*/
inputModel.value = filteredValue;

/**
* Update both the state variable and
* the component to keep them in sync.
*/
inputModel.value = filteredValue;

const inputCmp = ionInputEl.value;
if (inputCmp !== undefined) {
inputCmp.$el.value = filteredValue;
}
};

return { ionInputEl, inputModel, onInput };
},
});
const inputCmp = ionInputEl.value;
if (inputCmp !== undefined) {
inputCmp.$el.value = filteredValue;
}
};
</script>
```
67 changes: 36 additions & 31 deletions static/usage/v8/input/helper-error/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,36 +13,41 @@
></ion-input>
</template>

<script lang="ts">
import { IonInput } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonInput },
methods: {
validateEmail(email) {
return email.match(
/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
);
},

validate(ev) {
const value = ev.target.value;

this.$refs.input.$el.classList.remove('ion-valid');
this.$refs.input.$el.classList.remove('ion-invalid');

if (value === '') return;

this.validateEmail(value)
? this.$refs.input.$el.classList.add('ion-valid')
: this.$refs.input.$el.classList.add('ion-invalid');
},

markTouched() {
this.$refs.input.$el.classList.add('ion-touched');
},
},
});
<script setup lang="ts">
import { ref } from 'vue';
import { IonInput } from '@ionic/vue';

const intput = ref<HTMLElement | null>(null);

function validateEmail(email: string) {
return email.match(
/^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
) !== null;
}

function validate(ev: Event) {
const target = ev.target as HTMLInputElement;
const value = target.value;

if (!intput.value) return;

const inputElement = intput.value;

inputElement.classList.remove('ion-valid');
inputElement.classList.remove('ion-invalid');

if (value === '') return;

if (validateEmail(value)) {
inputElement.classList.add('ion-valid');
} else {
inputElement.classList.add('ion-invalid');
}
}

function markTouched() {
if (!intput.value) return;
intput.value.classList.add('ion-touched');
}
</script>
```
7 changes: 1 addition & 6 deletions static/usage/v8/input/label-placement/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,7 @@
</ion-list>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonInput, IonItem, IonList } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonInput, IonItem, IonList },
});
</script>
```
7 changes: 1 addition & 6 deletions static/usage/v8/input/label-slot/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,7 @@
</ion-list>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonInput, IonItem, IonList, IonText } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonInput, IonItem, IonList, IonText },
});
</script>
```
7 changes: 1 addition & 6 deletions static/usage/v8/input/no-visible-label/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,7 @@
</ion-list>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonInput, IonItem, IonList } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonInput, IonItem, IonList },
});
</script>
```
16 changes: 1 addition & 15 deletions static/usage/v8/input/start-end-slots/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,8 @@
</ion-list>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/vue';
import { eye, lockClosed } from 'ionicons/icons';
import { defineComponent } from 'vue';

export default defineComponent({
components: {
IonButton,
IonIcon,
IonInput,
IonItem,
IonList,
},
setup() {
return { eye, lockClosed };
},
});
</script>
```
7 changes: 1 addition & 6 deletions static/usage/v8/input/theming/colors/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,7 @@
<ion-input aria-label="Dark input" color="dark" placeholder="Dark input"></ion-input>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonInput } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonInput },
});
</script>
```
7 changes: 1 addition & 6 deletions static/usage/v8/input/theming/css-properties/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,8 @@
></ion-input>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonInput } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonInput },
});
</script>

<style>
Expand Down
7 changes: 1 addition & 6 deletions static/usage/v8/item-divider/basic/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,7 @@
</ion-list>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList },
});
</script>
```
7 changes: 1 addition & 6 deletions static/usage/v8/item-divider/theming/colors/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,7 @@
</ion-item-divider>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonItemDivider, IonLabel } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonItemDivider, IonLabel },
});
</script>
```
7 changes: 1 addition & 6 deletions static/usage/v8/item-divider/theming/css-properties/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,8 @@
</ion-item-divider>
</template>

<script lang="ts">
<script setup lang="ts">
import { IonItemDivider } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonItemDivider },
});
</script>

<style scoped>
Expand Down
Loading