|
| 1 | +<p> |
| 2 | + <a href="https://www.npmjs.com/package/vite-plugin-vue-hsml" target="_blank"> |
| 3 | + <img alt="NPM package" src="https://img.shields.io/npm/v/vite-plugin-vue-hsml.svg"> |
| 4 | + </a> |
| 5 | + <a href="https://www.npmjs.com/package/vite-plugin-vue-hsml" target="_blank"> |
| 6 | + <img alt="Downloads" src="https://img.shields.io/npm/dt/vite-plugin-vue-hsml.svg"> |
| 7 | + </a> |
| 8 | + <a href="https://github.com/Shinigami92/vite-plugin-vue-hsml/actions/workflows/ci.yml"> |
| 9 | + <img alt="Build Status" src="https://github.com/Shinigami92/vite-plugin-vue-hsml/actions/workflows/ci.yml/badge.svg?branch=main"> |
| 10 | + </a> |
| 11 | + <a href="https://github.com/Shinigami92/vite-plugin-vue-hsml/blob/main/LICENSE"> |
| 12 | + <img alt="License: MIT" src="https://img.shields.io/github/license/Shinigami92/vite-plugin-vue-hsml.svg"> |
| 13 | + </a> |
| 14 | + <a href="https://www.paypal.com/donate?hosted_button_id=L7GY729FBKTZY" target="_blank"> |
| 15 | + <img alt="Donate: PayPal" src="https://img.shields.io/badge/Donate-PayPal-blue.svg"> |
| 16 | + </a> |
| 17 | +</p> |
| 18 | + |
| 19 | +# UNDER CONSTRUCTION |
| 20 | + |
| 21 | +Right now there is no stable version of `hsml` available. I'm just working on it. |
| 22 | + |
| 23 | +<img src="https://chronicle-brightspot.s3.amazonaws.com/6a/c4/00e4ab3143f7e0cf4d9fd33aa00b/constructocat2.jpg" width="400px" /> |
| 24 | + |
1 | 25 | # vite-plugin-vue-hsml
|
| 26 | + |
| 27 | +[hsml](https://github.com/Shinigami92/hsml) is a hyper short markup language that is inspired by [pug](https://pugjs.org) (aka jade). |
| 28 | + |
| 29 | +This plugin allows you to use `hsml` in Vue SFCs. |
| 30 | + |
| 31 | +## Example |
| 32 | + |
| 33 | +```vue |
| 34 | +<script setup lang="ts"> |
| 35 | +defineProps<{ |
| 36 | + /** Show the back button on small screens */ |
| 37 | + backOnSmallScreen?: boolean; |
| 38 | + /** Show the back button on both small and big screens */ |
| 39 | + back?: boolean; |
| 40 | + /** Do not applying overflow hidden to let use floatable components in title */ |
| 41 | + noOverflowHidden?: boolean; |
| 42 | +}>(); |
| 43 | +
|
| 44 | +const container = ref(); |
| 45 | +const route = useRoute(); |
| 46 | +const { height: windowHeight } = useWindowSize(); |
| 47 | +const { height: containerHeight } = useElementBounding(container); |
| 48 | +const wideLayout = computed(() => route.meta.wideLayout ?? false); |
| 49 | +const sticky = computed(() => route.path?.startsWith('/settings/')); |
| 50 | +const containerClass = computed(() => { |
| 51 | + // we keep original behavior when not in settings page and when the window height is smaller than the container height |
| 52 | + if (!isHydrated.value || !sticky.value || windowHeight.value < containerHeight.value) return null; |
| 53 | +
|
| 54 | + return 'lg:sticky lg:top-0'; |
| 55 | +}); |
| 56 | +</script> |
| 57 | +
|
| 58 | +<template lang="hsml"> |
| 59 | +div(ref="container" :class="containerClass") |
| 60 | + .sticky.top-0.z10.backdrop-blur.native:lg:w-[calc(100vw-5rem)].native:xl:w-[calc(135%+(100vw-1200px)/2)]( |
| 61 | + pt="[env(safe-area-inset-top,0)]" |
| 62 | + bg="[rgba(var(--rgb-bg-base),0.7)]" |
| 63 | + ) |
| 64 | + .flex.justify-between.px5.py2.native:xl:flex(:class="{ 'xl:hidden': $route.name !== 'tag' }" border="b base") |
| 65 | + .flex.gap-3.items-center.py2.w-full(:overflow-hidden="!noOverflowHidden ? '' : false") |
| 66 | + NuxtLink.items-center.btn-text.p-0.xl:hidden( |
| 67 | + v-if="backOnSmallScreen || back" |
| 68 | + flex="~ gap1" |
| 69 | + :aria-label="$t('nav.back')" |
| 70 | + @click="$router.go(-1)" |
| 71 | + ) |
| 72 | + .rtl-flip(i-ri:arrow-left-line) |
| 73 | + .flex.w-full.native-mac:justify-center.native-mac:text-center.native-mac:sm:justify-start( |
| 74 | + :truncate="!noOverflowHidden ? '' : false" |
| 75 | + data-tauri-drag-region |
| 76 | + ) |
| 77 | + slot(name="title") |
| 78 | + .sm:hidde.nh-7.w-1px |
| 79 | + .flex.items-center.flex-shrink-0.gap-x-2 |
| 80 | + slot(name="actions") |
| 81 | + PwaBadge.lg:hidden |
| 82 | + NavUser(v-if="isHydrated") |
| 83 | + NavUserSkeleton(v-else) |
| 84 | + slot(name="header") |
| 85 | + div(hidden) |
| 86 | + PwaInstallPrompt.lg:hidden |
| 87 | + .m-auto(:class="isHydrated && wideLayout ? 'xl:w-full sm:max-w-600px' : 'sm:max-w-600px md:shrink-0'") |
| 88 | + .h-6(hidden :class="{ 'xl:block': $route.name !== 'tag' && !$slots.header }") |
| 89 | + slot |
| 90 | +</template> |
| 91 | +``` |
0 commit comments