@xy-planning-network/trees 0.2.58 → 0.2.62
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/trees.esm.js +423 -297
- package/dist/trees.min.js +2 -2
- package/dist/trees.ssr.js +396 -258
- package/package.json +1 -1
- package/src/lib-components/forms/Radio.vue +1 -0
- package/src/lib-components/forms/Toggle.vue +29 -0
- package/src/lib-components/forms/YesOrNoRadio.vue +4 -2
- package/trees.d.ts +1 -0
package/package.json
CHANGED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<Switch
|
|
3
|
+
:class="[
|
|
4
|
+
modelValue ? 'bg-blue-600' : 'bg-gray-200',
|
|
5
|
+
'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
|
|
6
|
+
]"
|
|
7
|
+
:modelValue="modelValue"
|
|
8
|
+
@update:modelValue="$emit('update:modelValue', $event)"
|
|
9
|
+
>
|
|
10
|
+
<span class="sr-only">Use</span>
|
|
11
|
+
<span
|
|
12
|
+
aria-hidden="true"
|
|
13
|
+
:class="[
|
|
14
|
+
modelValue ? 'translate-x-5' : 'translate-x-0',
|
|
15
|
+
'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200',
|
|
16
|
+
]"
|
|
17
|
+
/>
|
|
18
|
+
</Switch>
|
|
19
|
+
</template>
|
|
20
|
+
|
|
21
|
+
<script lang="ts">
|
|
22
|
+
import { Options, Prop, Vue } from "vue-property-decorator";
|
|
23
|
+
import { Switch } from "@headlessui/vue";
|
|
24
|
+
|
|
25
|
+
@Options({ name: "Toggle", components: { Switch } })
|
|
26
|
+
export default class Toggle extends Vue {
|
|
27
|
+
@Prop({ type: Boolean, required: false }) modelValue?: boolean;
|
|
28
|
+
}
|
|
29
|
+
</script>
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
type="radio"
|
|
11
11
|
class="w-4 h-4 border-gray-300 focus:ring-blue-500 text-xy-blue"
|
|
12
12
|
:id="`${hasNameAttr ? name : uuid}-true`"
|
|
13
|
+
:name="hasNameAttr ? name : uuid"
|
|
13
14
|
:value="true"
|
|
14
15
|
:checked="modelValue === true"
|
|
15
16
|
v-bind="{
|
|
@@ -19,7 +20,7 @@
|
|
|
19
20
|
},
|
|
20
21
|
}"
|
|
21
22
|
/>
|
|
22
|
-
<span class="block ml-2 text-sm font-medium text-gray-
|
|
23
|
+
<span class="block ml-2 text-sm font-medium text-gray-900 leading-5"
|
|
23
24
|
>Yes</span
|
|
24
25
|
>
|
|
25
26
|
</label>
|
|
@@ -32,6 +33,7 @@
|
|
|
32
33
|
type="radio"
|
|
33
34
|
class="w-4 h-4 border-gray-300 focus:ring-blue-500 text-xy-blue"
|
|
34
35
|
:id="`${hasNameAttr ? name : uuid}-false`"
|
|
36
|
+
:name="hasNameAttr ? name : uuid"
|
|
35
37
|
:value="false"
|
|
36
38
|
:checked="modelValue === false"
|
|
37
39
|
v-bind="{
|
|
@@ -41,7 +43,7 @@
|
|
|
41
43
|
},
|
|
42
44
|
}"
|
|
43
45
|
/>
|
|
44
|
-
<span class="block ml-2 text-sm font-medium leading-5">No</span>
|
|
46
|
+
<span class="block ml-2 text-sm font-medium text-gray-900 leading-5">No</span>
|
|
45
47
|
</label>
|
|
46
48
|
</fieldset>
|
|
47
49
|
</template>
|
package/trees.d.ts
CHANGED
|
@@ -31,6 +31,7 @@ export const StaticTable: DefineComponent<{}, {}, any>;
|
|
|
31
31
|
export const Steps: DefineComponent<{}, {}, any>;
|
|
32
32
|
export const Table: DefineComponent<{}, {}, any>;
|
|
33
33
|
export const Tabs: DefineComponent<{}, {}, any>;
|
|
34
|
+
export const Toggle: DefineComponent<{}, {}, any>;
|
|
34
35
|
export const YesOrNoRadio: DefineComponent<{}, {}, any>;
|
|
35
36
|
|
|
36
37
|
export const BaseAPI: {
|