@morscherlab/mint-sdk 1.0.0-alpha.8 → 1.0.0-alpha.9

package/src/components/SampleHierarchyTree.vue

@@ -170,7 +170,7 @@ function renderNode(node: TreeNode, depth: number): VNode {
   const header = h(
     'div',
     {
-      class: 'mld-sample-tree__node-header',
+      class: 'mint-sample-tree__node-header',
       onClick: () => handleNodeClick(node),
     },
     [
@@ -179,7 +179,7 @@ function renderNode(node: TreeNode, depth: number): VNode {
             'button',
             {
               type: 'button',
-              class: 'mld-sample-tree__toggle',
+              class: 'mint-sample-tree__toggle',
               'aria-label': expanded ? 'Collapse' : 'Expand',
               onClick: (e: Event) => {
                 e.stopPropagation()
@@ -192,17 +192,17 @@ function renderNode(node: TreeNode, depth: number): VNode {
               ]),
             ]
           )
-        : h('span', { class: 'mld-sample-tree__toggle-placeholder' }),
+        : h('span', { class: 'mint-sample-tree__toggle-placeholder' }),
       props.showIcons
-        ? h('span', { class: ['mld-sample-tree__icon', `mld-sample-tree__icon--${node.type || 'custom'}`] }, [
+        ? h('span', { class: ['mint-sample-tree__icon', `mint-sample-tree__icon--${node.type || 'custom'}`] }, [
             h('svg', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' },
               iconElements.map(el => h(el.tag, el.attrs))
             ),
           ])
         : null,
-      h('span', { class: 'mld-sample-tree__label' }, node.label),
+      h('span', { class: 'mint-sample-tree__label' }, node.label),
       badge !== undefined
-        ? h('span', { class: ['mld-sample-tree__badge', `mld-sample-tree__badge--${badgeVar}`] }, String(badge))
+        ? h('span', { class: ['mint-sample-tree__badge', `mint-sample-tree__badge--${badgeVar}`] }, String(badge))
         : null,
     ]
   )
@@ -211,8 +211,8 @@ function renderNode(node: TreeNode, depth: number): VNode {
     showChildNodes && node.children
       ? h(
           Transition,
-          { enterActiveClass: 'mld-sample-tree__children--entering', leaveActiveClass: 'mld-sample-tree__children--leaving' },
-          () => h('div', { class: 'mld-sample-tree__children' }, node.children!.map((child) => renderNode(child, depth + 1)))
+          { enterActiveClass: 'mint-sample-tree__children--entering', leaveActiveClass: 'mint-sample-tree__children--leaving' },
+          () => h('div', { class: 'mint-sample-tree__children' }, node.children!.map((child) => renderNode(child, depth + 1)))
         )
       : null
 
@@ -220,7 +220,7 @@ function renderNode(node: TreeNode, depth: number): VNode {
     'div',
     {
       key: node.id,
-      class: ['mld-sample-tree__node', expanded ? 'mld-sample-tree__node--expanded' : '', !canExpand ? 'mld-sample-tree__node--leaf' : ''],
+      class: ['mint-sample-tree__node', expanded ? 'mint-sample-tree__node--expanded' : '', !canExpand ? 'mint-sample-tree__node--leaf' : ''],
       role: 'treeitem',
       'aria-expanded': canExpand ? expanded : undefined,
     },
@@ -235,13 +235,13 @@ function renderTree(): VNode[] {
 </script>
 
 <template>
-  <div :class="['mld-sample-tree', `mld-sample-tree--${size}`]" role="tree">
+  <div :class="['mint-sample-tree', `mint-sample-tree--${size}`]" role="tree">
     <!-- Empty state -->
-    <div v-if="nodes.length === 0" class="mld-sample-tree__empty">
-      <svg class="mld-sample-tree__empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <div v-if="nodes.length === 0" class="mint-sample-tree__empty">
+      <svg class="mint-sample-tree__empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
       </svg>
-      <p class="mld-sample-tree__empty-text">No items</p>
+      <p class="mint-sample-tree__empty-text">No items</p>
     </div>
 
     <!-- Tree nodes rendered via render function -->

package/src/components/SampleLegend.vue

@@ -55,7 +55,7 @@ function handleAdd() {
 </script>
 
 <template>
-  <div :class="['mld-sample-legend', `mld-sample-legend--${orientation}`]" role="list" aria-label="Sample types">
+  <div :class="['mint-sample-legend', `mint-sample-legend--${orientation}`]" role="list" aria-label="Sample types">
     <button
       v-for="(sample, index) in samples"
       :key="sample.id"
@@ -63,25 +63,25 @@ function handleAdd() {
       role="listitem"
       :aria-pressed="modelValue === sample.id"
       :class="[
-        'mld-sample-legend__item',
-        `mld-sample-legend__item--${size}`,
-        modelValue === sample.id ? 'mld-sample-legend__item--selected' : '',
+        'mint-sample-legend__item',
+        `mint-sample-legend__item--${size}`,
+        modelValue === sample.id ? 'mint-sample-legend__item--selected' : '',
       ]"
       @click="handleSampleClick(sample)"
     >
       <span
-        :class="['mld-sample-legend__swatch', `mld-sample-legend__swatch--${size}`]"
+        :class="['mint-sample-legend__swatch', `mint-sample-legend__swatch--${size}`]"
         :style="{ backgroundColor: getSampleColor(sample, index) }"
         :aria-hidden="true"
       />
 
-      <span :class="['mld-sample-legend__name', `mld-sample-legend__name--${size}`]">
+      <span :class="['mint-sample-legend__name', `mint-sample-legend__name--${size}`]">
         {{ sample.name }}
       </span>
 
       <span
         v-if="showCounts && sample.count !== undefined"
-        :class="['mld-sample-legend__count', `mld-sample-legend__count--${size}`]"
+        :class="['mint-sample-legend__count', `mint-sample-legend__count--${size}`]"
       >
         {{ sample.count }}
       </span>
@@ -89,11 +89,11 @@ function handleAdd() {
       <button
         v-if="editable"
         type="button"
-        class="mld-sample-legend__remove"
+        class="mint-sample-legend__remove"
         :aria-label="`Remove ${sample.name}`"
         @click="handleRemove($event, sample.id)"
       >
-        <svg class="mld-sample-legend__remove-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="mint-sample-legend__remove-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
         </svg>
       </button>
@@ -102,14 +102,14 @@ function handleAdd() {
     <button
       v-if="editable"
       type="button"
-      :class="['mld-sample-legend__add', `mld-sample-legend__add--${size}`]"
+      :class="['mint-sample-legend__add', `mint-sample-legend__add--${size}`]"
       aria-label="Add sample type"
       @click="handleAdd"
     >
-      <svg :class="`mld-sample-legend__add-icon--${size}`" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <svg :class="`mint-sample-legend__add-icon--${size}`" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
       </svg>
-      <span :class="`mld-sample-legend__add-text--${size}`">Add</span>
+      <span :class="`mint-sample-legend__add-text--${size}`">Add</span>
     </button>
   </div>
 </template>