Release 1.1.0

.github/renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "github>warp-ds/renovate-presets"
+  ]
+}

.github/workflows/crowdin-sync.yml

@@ -0,0 +1,10 @@
+name: Crowdin Synchronisation
+
+on:
+  push:
+    branches: [next, main]
+
+jobs:
+  synchronize-with-crowdin:
+    uses: warp-ds/reusable-workflows/.github/workflows/crowdin-sync.yml@main
+    secrets: inherit

CHANGELOG.md

@@ -1,3 +1,10 @@
+# [1.1.0-next.1](https://github.com/warp-ds/vue/compare/v1.0.1...v1.1.0-next.1) (2023-09-25)
+
+
+### Features
+
+* Add Badge component ([#66](https://github.com/warp-ds/vue/issues/66)) ([cd1a28c](https://github.com/warp-ds/vue/commit/cd1a28ca7a922701a4d03229427c330273cf06ca))
+
 ## [1.0.1](https://github.com/warp-ds/vue/compare/v1.0.0...v1.0.1) (2023-09-25)
 
 

components/badge/index.js

@@ -0,0 +1,5 @@
+import wBadge from './w-badge.vue'
+import { installer } from '#util'
+
+export const Badge = { install: installer([wBadge]) }
+export { wBadge }

components/badge/w-badge.vue

@@ -0,0 +1,42 @@
+<script setup>
+defineOptions({
+  name: 'wBadge',
+});
+
+import { badge as ccBadge } from '@warp-ds/css/component-classes';
+import { computed } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String,
+    default: 'div'
+  },
+  variant: {
+    type: String,
+    default: 'neutral',
+    validator: (value) => ['neutral', 'info', 'positive', 'warning', 'negative', 'disabled', 'notification', 'price'].includes(value)
+  },
+  position: {
+    type: String,
+    validator: (value) => ['top-left', 'top-right', 'bottom-right', 'bottom-left'].includes(value)
+  },
+});
+
+const badgeClasses = computed(() => [
+  ccBadge.base,
+  ccBadge[props.variant],
+  {
+    [ccBadge.positionBase]: props.position,
+    [ccBadge.positionTL]: props.position === 'top-left',
+    [ccBadge.positionTR]: props.position === 'top-right',
+    [ccBadge.positionBR]: props.position === 'bottom-right',
+    [ccBadge.positionBL]: props.position === 'bottom-left',
+  }
+]);
+</script>
+
+<template>
+  <component :is="as" :class="badgeClasses">
+    <slot />
+  </component>
+</template>

components/tag/w-tag.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ribbon as ccRibbon } from '@warp-ds/css/component-classes'
-import { computed } from 'vue'
+import { computed, onMounted } from 'vue'
 
 const props = defineProps({
   primary: {
@@ -32,6 +32,10 @@ const baseClasses = computed(() => ({
   [ccRibbon.sponsored]: props.sponsored,
   [ccRibbon.neutral]: props.neutral
 }))
+
+onMounted(() => {
+  console.warn('w-tag is deprecated and will be removed in a future version, please switch to w-badge')
+});
 </script>
 
 <template>

crowdin.yml

@@ -0,0 +1,35 @@
+project_id_env: CROWDIN_PROJECT_ID
+api_token_env: CROWDIN_API_TOKEN
+base_url_env: CROWDIN_BASE_URL
+base_path: "."
+
+preserve_hierarchy: true
+
+files:
+  [
+    {
+      "source": "/components/breadcrumbs/locales/en/messages.po",
+      "dest": "vue/components/breadcrumbs/messages.po",
+      "translation": "/components/breadcrumbs/locales/%two_letters_code%/messages.po",
+    },
+    {
+      "source": "/components/button/locales/en/messages.po",
+      "dest": "vue/components/button/messages.po",
+      "translation": "/components/button/locales/%two_letters_code%/messages.po",
+    },
+    {
+      "source": "/components/forms/locales/en/messages.po",
+      "dest": "vue/components/forms/messages.po",
+      "translation": "/components/forms/locales/%two_letters_code%/messages.po",
+    },
+    {
+      "source": "/components/modal/locales/en/messages.po",
+      "dest": "vue/components/modal/messages.po",
+      "translation": "/components/modal/locales/%two_letters_code%/messages.po",
+    },
+    {
+      "source": "/components/pill/locales/en/messages.po",
+      "dest": "vue/components/pill/messages.po",
+      "translation": "/components/pill/locales/%two_letters_code%/messages.po",
+    },
+  ]

dev/pages/Badge.vue

@@ -0,0 +1,60 @@
+<script setup>
+import {computed, reactive, ref} from 'vue';
+import { wBadge } from '#components';
+import { radio } from '#dev-util';
+
+const badgeVariants = [
+  { name: 'Undefined', radio },
+  { name: 'neutral', radio },
+  { name: 'info', radio },
+  { name: 'positive', radio },
+  { name: 'warning', radio },
+  { name: 'negative', radio },
+  { name: 'disabled', radio },
+  { name: 'notification', radio },
+  { name: 'price', radio },
+];
+const badgePositions = [
+  { name: 'Undefined', radio },
+  { name: 'top-left', radio },
+  { name: 'top-right', radio },
+  { name: 'bottom-left', radio },
+  { name: 'bottom-right', radio },
+];
+
+const currentVariant = reactive({active: 'Undefined'});
+const currentPosition = reactive({active: 'Undefined'});
+
+const hasVariant = computed(() => currentVariant.active !== 'Undefined');
+const hasPosition = computed(() => currentPosition.active !== 'Undefined');
+</script>
+
+<template>
+  <div>
+    <component-title title="Badge" />
+
+    <token v-if="hasVariant && hasPosition" :state="[currentVariant, currentPosition]">
+      <div class="relative border border-0 rounded-8 overflow-hidden h-96">
+        <img class="w-full h-96 object-cover" src="https://source.unsplash.com/random/768x96" />
+        <w-badge :variant="currentVariant.active" :position="currentPosition.active">{{currentVariant.active}}</w-badge>
+      </div>
+    </token>
+    <token v-else-if="hasPosition" :state="currentPosition">
+      <div class="relative border border-0 rounded-8 overflow-hidden h-96">
+        <img class="w-full h-96 object-cover" src="https://source.unsplash.com/random/768x96" />
+        <w-badge :position="currentPosition.active">default (rendered as neutral)</w-badge>
+      </div>
+    </token>
+    <token v-else-if="hasVariant" :state="currentVariant">
+      <w-badge :variant="currentVariant.active">{{currentVariant.active}}</w-badge>
+    </token>
+    <token v-else>
+      <w-badge>default (rendered as neutral)</w-badge>
+    </token>
+
+    <demo-controls y>
+      <demo-control label="Variant" :controls="badgeVariants" :state="currentVariant" />
+      <demo-control label="Position" :controls="badgePositions" :state="currentPosition" />
+    </demo-controls>
+  </div>
+</template>

dev/src/Controls.vue

@@ -3,7 +3,7 @@ defineProps({ x: Boolean, y: Boolean })
 </script>
 
 <template>
-  <div class="controls border border-gray-200 bg-gray-100 mb-24 p-16 rounded-8 overflow-x-scroll" :class="{ 'space-y-24': y, 'space-x-24': x }">
+  <div class="border s-border s-bg-subtle mb-24 p-16 rounded-8 overflow-x-auto" :class="{ 'space-y-24': y, 'space-x-24': x }">
     <slot />
   </div>
 </template>

dev/src/main.js

@@ -2,21 +2,28 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import Cleave from 'cleave-lite';
 import { router } from './router'
-import { setWasm, setCDN, getHighlighter } from 'shiki'
+import { getHighlighterCore } from 'shikiji/core'
+import { getWasmInlined } from 'shikiji/wasm'
+import vitesseLight from 'shikiji/themes/vitesse-light.mjs'
 import Control from './Control.vue'
 import Controls from './Controls.vue'
 import ComponentTitle from './ComponentTitle.vue'
 import { Token } from '@itsy/token'
 import 'uno.css'
 
-setWasm('/shiki/dist/onig.wasm')
-setCDN('/shiki/')
-
-const highlighter = await getHighlighter({ theme: 'vitesse-light', langs: ['js', 'vue-html'] })
+const highlighter = await getHighlighterCore({
+  themes: [vitesseLight],
+  langs: [
+    import('shikiji/langs/javascript.mjs'),
+    import('shikiji/langs/vue-html.mjs')
+  ],
+  loadWasm: getWasmInlined
+})
 
 createApp(App)
   .provide('Cleave', Cleave)
   .provide('highlighter', highlighter)
+  .provide('highlightTheme', 'vitesse-light')
   .component('token', Token)
   .component('demo-control', Control)
   .component('demo-controls', Controls)

dev/src/router.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Home from '../pages/Home.vue'
 import Alert from '../pages/Alert.vue'
 import Attention from '../pages/Attention.vue'
+import Badge from '../pages/Badge.vue'
 import Box from '../pages/Box.vue'
 import Breadcrumbs from '../pages/Breadcrumbs.vue'
 import Button from '../pages/Button.vue'
@@ -25,6 +26,7 @@ export const routes = [
   { path: '/', component: Home, name: 'home' },
   { path: '/alert', component: Alert, name: 'alert' },
   { path: '/attention', component: Attention, name: 'attention' },
+  { path: '/badge', component: Badge, name: 'badge' },
   { path: '/box', component: Box, name: 'box' },
   { path: '/button', component: Button, name: 'button' },
   { path: '/breadcrumbs', component: Breadcrumbs, name: 'breadcrumbs' },

dev/src/sidebar-config.js

@@ -14,10 +14,10 @@ export const sidebarConfig = [
     links: [
       { to: 'alert', title: 'Alert' },
       { to: 'attention', title: 'Attention' },
+      { to: 'badge', title: 'Badge' },
       { to: 'breadcrumbs', title: 'Breadcrumbs' },
       { to: 'modal', title: 'Modal' },
-      { to: 'steps', title: 'Steps' },
-      { to: 'tag', title: 'Tag' }
+      { to: 'steps', title: 'Steps' }
   ]
   },
   {

index.js

@@ -1,6 +1,7 @@
 // order matters here - wClickable in 'generic' needs to come early
 export * from './components/generic'
 export * from './components/forms'
+export * from './components/badge'
 export * from './components/box'
 export * from './components/breadcrumbs'
 export * from './components/button'

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@warp-ds/vue",
   "repository": "git@github.com:warp-ds/vue.git",
-  "version": "1.0.1",
+  "version": "1.1.0-next.1",
   "description": "Warp components for Vue 3",
   "type": "module",
   "exports": {
@@ -16,8 +16,6 @@
   },
   "scripts": {
     "commit": "cz",
-    "cp": "mkdir -p ./dev/public/shiki && cp -r ./node_modules/shiki/{dist,languages,samples,themes} ./dev/public/shiki",
-    "cp:shikifix": "cp node_modules/.pnpm/vscode-oniguruma@1.7.0/node_modules/vscode-oniguruma/release/onig.wasm ./dev/public/shiki/dist/",
     "dev": "vite dev dev --config ./vite.config.js",
     "test": "vitest run",
     "watch": "vitest watch",
@@ -30,11 +28,11 @@
   "keywords": [],
   "license": "Apache-2.0",
   "dependencies": {
+    "@floating-ui/dom": "^1.5.1",
     "@lingui/core": "^4.3.0",
     "@warp-ds/core": "^1.0.0",
     "@warp-ds/css": "^1.1.0",
     "@warp-ds/uno": "^1.1.0",
-    "@floating-ui/dom": "^1.5.1",
     "create-v-model": "^2.2.0",
     "dom-focus-lock": "^1.1.0",
     "element-collapse": "^1.1.0",
@@ -44,7 +42,7 @@
   "devDependencies": {
     "@eik/cli": "^2.0.22",
     "@eik/rollup-plugin": "^4.0.50",
-    "@itsy/token": "^1.0.4",
+    "@itsy/token": "^2.0.0-next.0",
     "@lingui/cli": "^4.3.0",
     "@lingui/conf": "^4.3.0",
     "@lingui/extractor-vue": "^4.3.0",
@@ -61,7 +59,7 @@
     "fuse.js": "^6.6.2",
     "happy-dom": "^9.20.3",
     "semantic-release": "^21.1.1",
-    "shiki": "^0.14.3",
+    "shikiji": "^0.6.8",
     "unocss": "^0.56.0",
     "vite": "^4.4.9",
     "viteik": "^1.0.3",